Google Chartsの軸で特定の値だけを表示する方法は？

Question

私は多くの日付を持つチャートを持っています。どういうわけか特定のタイトルのみを表示することは可能ですか？たとえば、最初から最後まで、そしてそれらの間に5つごとに？

Answer 1

あなたはデータの値を使用するためのカスタム軸ラベル

を設定するticksconfiguration optionを使用することができ、DataTable
getValueにgetValueメソッドを使用するには、二つの引数を取りrow & column

行と列はゼロベースのです、
、モジュラス演算子%を使用し、すべての5番目の要素を取得するgetNumberOfRows() - 1
data.getValue(data.getNumberOfRows() - 1, 0)

を使用し、最初の列の最後の値を取得するために、0
data.getValue(0, 0)

ある各々の第1は、で保ちますこれには最初の要素
が含まれ、行の数に応じて最後の要素が含まれます。

// add every fifth 
var tickMarks = []; 
for (var i = 0; i < data.getNumberOfRows(); i++) { 
    if (i % 5 === 0) { 
    tickMarks.push(data.getValue(i, 0)); 
    } 
} 

...のみ最初と最後を追加する作業スニペット、以下

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Date'); 
 
    data.addColumn('number', 'Units'); 
 
    data.addRows([ 
 
     [new Date(2016,0,1), 100], 
 
     [new Date(2016,0,3), 120], 
 
     [new Date(2016,0,30), 110], 
 
     [new Date(2016,1,1), 170], 
 
     [new Date(2016,1,10), 180], 
 
     [new Date(2016,1,25), 110], 
 
     [new Date(2016,2,1), 170], 
 
     [new Date(2016,2,14), 171], 
 
     [new Date(2016,2,20), 172], 
 
     [new Date(2016,3,12), 173], 
 
     [new Date(2016,3,16), 174], 
 
     [new Date(2016,3,19), 175], 
 
     [new Date(2016,4,12), 176], 
 
     [new Date(2016,4,16), 177], 
 
     [new Date(2016,4,19), 178], 
 
     [new Date(2016,5,12), 179], 
 
     [new Date(2016,5,16), 180], 
 
     [new Date(2016,5,19), 181], 
 
     [new Date(2016,6,12), 190], 
 
     [new Date(2016,6,16), 192], 
 
     [new Date(2016,6,19), 196], 
 
     [new Date(2016,6,24), 192], 
 
     [new Date(2016,7,12), 190], 
 
     [new Date(2016,7,16), 192], 
 
     [new Date(2016,7,19), 196] 
 
    ]); 
 

 
    var tickMarks = []; 
 

 
    //add first 
 
    tickMarks.push(data.getValue(0, 0)); 
 

 
    //add last 
 
    tickMarks.push(data.getValue(data.getNumberOfRows() - 1, 0)); 
 

 
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
 
    chart.draw(data, { 
 
     hAxis: { 
 
     format: 'M/d/yy', 
 
     ticks: tickMarks 
 
     } 
 
    }); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>