2017-02-21 10 views
0

データがある場合はうまく動作するGoogleのグラフがあります。しかし、時には表示するデータがありません。この場合、vAxisは0.0、0.5、1.0の3つの値しか表示しないように自動的に決定します。私の場合、整数だけを表示するのが理にかなっています。だから私はGoogleグラフでvAxisの最小間隔を設定するにはどうすればよいですか?

vAxis: { viewWindow: { min: 0 }, format: 0 } 

を使用しようとしました。しかし、それだけで切り上げと示していますように、0 1、2及び:私はむしろ値を確認するには、1の分間隔を必要とするだろう0、1、1 。

どうすればこの問題を解決できますか?

このフィドルで遊ぶことを自由にしてください:click here

答えて

0

WhiteHatの提案によると、この問題に対する私のカスタム解決策があります。私はGoogleのチャートオプションのいくつかの種類と簡単な方法を見つけられませんでしたが、これは私が必要なものを正確に行い、簡単な回避策です:

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
var maxValue = 7; 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Date'); 
 
    data.addColumn('number', 'Count'); 
 
    data.addRows([ 
 
    [new Date(2017, 1, 1), 0], 
 
    [new Date(2017, 1, 2), 0], 
 
    [new Date(2017, 1, 3), 7], 
 
    [new Date(2017, 1, 4), 0], 
 
    [new Date(2017, 1, 5), 0], 
 
    ]); 
 

 
    var options = { 
 
    title: 'Test', 
 
    legend: 'none', 
 
    width: 450, 
 
    height: 500 
 
    }; 
 

 
options["vAxis"] = (maxValue < 5) ? { viewWindow: { min: 0 }, ticks: [0, 1, 2, 3, 4] } : 
 
        (maxValue < 9) ? { viewWindow: { min: 0 }, ticks: [0, 2, 4, 6, 8] } : 
 
        (maxValue < 13) ? { viewWindow: { min: 0 }, ticks: [0, 3, 6, 9, 12] } : { viewWindow: { min: 0 } }; 
 

 
    var linearChart = new google.visualization.LineChart(document.getElementById('div')); 
 
    linearChart.draw(data, options); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="div"></div>

関連する問題