如何在Google Charts轴中仅显示特定值？(How to show only certain value in Google Charts axes?)

所以我有一张图表，里面有很多日期。是否有可能只显示某些标题。例如，他们之间的第一个，最后一个和每个5个？

So I have a chart which has many dates. Is it possible somehow to show only certain titles. For example first, last and every 5 between them?

最满意答案

您可以使用ticks 配置选项来设置自定义轴标签

要使用数据中的值，请在DataTable上使用getValue方法 getValue有两个参数： row和column

行和列从零开始 ，每个的第一个为0 data.getValue(0, 0)

要获取第一列中的最后一个值，请使用getNumberOfRows() - 1 data.getValue(data.getNumberOfRows() - 1, 0)

要获得每个第五个元素，请使用模数运算符% ，请记住，这将包括第一个元素，可能是最后一个，取决于行数......

// 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> 
  
 
you can use the ticks configuration option to set custom axis labels  
to use values from the data, use the getValue method on the DataTable getValue takes two arguments, row & column  
the rows and columns are zero-based, the first of each is 0 data.getValue(0, 0)  
to get the last value in the first column, use getNumberOfRows() - 1 data.getValue(data.getNumberOfRows() - 1, 0)  
to get every fifth element, use the modulus operator %, keep in mind this will include the first element, and possibly the last, depending on the number of rows... 
// add every fifth
var tickMarks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
  if (i % 5 === 0) {
    tickMarks.push(data.getValue(i, 0));
  }
}
 
see following working snippet, which only adds the first and last...  
 
 
  
  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>