Question

我使用来自AJAX的大量json数据绘制谷歌折线图。数据如下：

[
  [new Date(2013, 02), 1324, null, 8902],
  [new Date(2013, 05), null, 1256, 8902],
  [new Date(2013, 07), 1324, 1256, null],
  [new Date(2014, 02), 1324, null, 8902],
  [new Date(2014, 08), null, 1256, 8902],
  [new Date(2015, 01), 1324, 1256, null],
  [new Date(2015, 09), 1324, null, 8902],
  ...
]

数据很大，所以我决定只在haxis / xaxis上显示年份。

{
  haxis: {
    format: 'yyyy'
  }
}

但是问题出现了，xaxis / haxis出现重复的年份，如：
2013 2013 2013 2013 2014 2015 2015。我知道，因为月份不同。但是，无论如何要删除重复的年份？顺便说一句，数据是动态的。所以我不能对刻度进行硬编码。

Answer 1

可以从数据

动态构建ticks

使用数据表方法 - ＆gt; getColumnRange(colIndex)

这会返回一个min＆amp;列的max属性，
可用于构建刻度线

请参阅以下工作代码段以获取示例...

＆＃13;

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      [new Date(2013, 02), 1324, null, 8902],
      [new Date(2013, 05), null, 1256, 8902],
      [new Date(2013, 07), 1324, 1256, null],
      [new Date(2014, 02), 1324, null, 8902],
      [new Date(2014, 08), null, 1256, 8902],
      [new Date(2015, 01), 1324, 1256, null],
      [new Date(2015, 09), 1324, null, 8902]
    ], true);

    var dateRange = data.getColumnRange(0);
    var oneYear = (1000 * 60 * 60 * 24 * 365.25);
    var ticksAxisH = [];
    var year = -1;
    for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneYear) {
      var tick = new Date(i);
      if (year !== tick.getFullYear()) {
        ticksAxisH.push({
          v: tick,
          f: tick.getFullYear().toString()
        });
        year = tick.getFullYear();
      }
    }

    var options = {
      hAxis: {
        ticks: ticksAxisH
      }
    };

    var chart = new google.visualization.LineChart($('#chart').get(0));
    chart.draw(data, options);
  },
  packages:['corechart']
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

＆＃13;

如何避免haxis / xaxis年份与Google Line Chart中的日期格式重复？

1 个答案: