2016-04-22 14 views
1

Google Chartsを使用して縦棒グラフを作成しています。これは、過去30日間の特定のページのページビュー数を示すグラフです。私は、次のJavaScriptコード(フルノーカットフィドルhere)とそれを作成します。Google Chartsのズームインを防止する

google.charts.load('current', {packages: ['corechart', 'bar']}); 
google.charts.setOnLoadCallback(drawBasic); 

function drawBasic() { 

     var data = new google.visualization.DataTable(); 
     data.addColumn('date', 'Day'); 
     data.addColumn('number', 'Visits'); 

     data.addRows([ 
     // These data rows come from my database (timestamp + hits) 
     [new Date(1458691200 * 1000),null], 
     [new Date(1458777600 * 1000),null], 
     // This keeps repeating for each day, all with null value 
     [new Date(1461283200 * 1000),2], 
     [new Date(1461369600 * 1000),null] 
     ]); 

     var options = { 
     chartArea: { 
     width: '70%', 
     height: '70%' 
     }, 
     hAxis: { 
     format: 'd', 
     gridlines: { 
      count: 15 
     }, 
     title: 'Day' 
     }, 
     vAxis: { 
     baseline: 0, 
     format: '#', 
     gridlines: { 
      count: -1 
     }, 
     title: 'Views', 
     viewWindowMode:'explicit', 
     viewWindow: { 
      max: 10, 
      min: 0 
     } 
     } 
    }; 

     var chart = new google.visualization.ColumnChart(
     document.getElementById('chart_div') 
    ); 

     chart.draw(data, options); 
    } 

これはかなりうまく動作しますが、それは私が必要なものに近いチャートを思い付くが、グラフは上の「ズームイン」されます唯一の非NULLデータ:

Chart

この方法で4月22日の2ビューは実際にはそうではありません4月22日、4月12日までの期間をカバーしているように、それが見えます。

グラフを拡大しないようにするにはどうすればよいですか?理想的には、その期間のグリッド線の間に収まる必要があります。

答えて

1

ズームの問題ではないと思います。
'current'バージョンのバグ/問題のようです。 '0'は ` 'current'`の問題を修正するには` null`なので値を変更する -
バージョン'43'が、これはFYI、助け

google.charts.load('43', {packages: ['corechart', 'bar']}); 
 
google.charts.setOnLoadCallback(drawBasic); 
 

 
function drawBasic() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Day'); 
 
    data.addColumn('number', 'Visits'); 
 

 
    data.addRows([ 
 
    [new Date(1458691200 * 1000),null], 
 
    [new Date(1458777600 * 1000),null], 
 
    [new Date(1458864000 * 1000),null], 
 
    [new Date(1458950400 * 1000),null], 
 
    [new Date(1459036800 * 1000),null], 
 
    [new Date(1459123200 * 1000),null], 
 
    [new Date(1459209600 * 1000),null], 
 
    [new Date(1459296000 * 1000),null], 
 
    [new Date(1459382400 * 1000),null], 
 
    [new Date(1459468800 * 1000),null], 
 
    [new Date(1459555200 * 1000),null], 
 
    [new Date(1459641600 * 1000),null], 
 
    [new Date(1459728000 * 1000),null], 
 
    [new Date(1459814400 * 1000),null], 
 
    [new Date(1459900800 * 1000),null], 
 
    [new Date(1459987200 * 1000),null], 
 
    [new Date(1460073600 * 1000),null], 
 
    [new Date(1460160000 * 1000),null], 
 
    [new Date(1460246400 * 1000),null], 
 
    [new Date(1460332800 * 1000),null], 
 
    [new Date(1460419200 * 1000),null], 
 
    [new Date(1460505600 * 1000),null], 
 
    [new Date(1460592000 * 1000),null], 
 
    [new Date(1460678400 * 1000),null], 
 
    [new Date(1460764800 * 1000),null], 
 
    [new Date(1460851200 * 1000),null], 
 
    [new Date(1460937600 * 1000),null], 
 
    [new Date(1461024000 * 1000),null], 
 
    [new Date(1461110400 * 1000),null], 
 
    [new Date(1461196800 * 1000),null], 
 
    [new Date(1461283200 * 1000),2], 
 
    [new Date(1461369600 * 1000),null] 
 
    ]); 
 

 
    var options = { 
 
    chartArea: { 
 
     width: '70%', 
 
     height: '70%' 
 
    }, 
 
    hAxis: { 
 
     format: 'd', 
 
     gridlines: { 
 
     count: 15 
 
     }, 
 
     title: 'Day' 
 
    }, 
 
    vAxis: { 
 
     baseline: 0, 
 
     format: '#', 
 
     gridlines: { 
 
     count: -1 
 
     }, 
 
     title: 'Views', 
 
     viewWindowMode:'explicit', 
 
     viewWindow: { 
 
     max: 10, 
 
     min: 0 
 
     } 
 
    } 
 
    }; 
 

 
    var chart = new google.visualization.ColumnChart(
 
    document.getElementById('chart_div') 
 
); 
 

 
    chart.draw(data, options); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

+0

希望...期待チャートをレンダリングバージョン... – WhiteHat

+0

ありがとう、それは動作します!奇妙な問題。私は 'null'値を' 0'に変換することも考えましたが、これは "この日付のデータがありません"ではなく、 "誰もページを訪れませんでした"のように見えます。それらは否定された。 – Oldskool

関連する問題