如何避免 Google 折线图中日期格式的 haxis/xaxis 年份重复？答案

【问题标题】：How to avoid haxis/xaxis year duplicate with date format in Google Line Chart?如何避免 Google 折线图中日期格式的 haxis/xaxis 年份重复？
【发布时间】：2017-07-10 08:43:00
【问题描述】：

我用来自 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 2014 2014 2015 2015。
我知道是因为月份不同。但是无论如何要删除重复的年份吗？顺便说一下，数据是动态的。所以我不能对刻度进行硬编码。

【问题讨论】：

标签： charts google-visualization

【解决方案1】：

ticks 可以根据数据动态构建

使用数据表法-->getColumnRange(colIndex)

这将返回一个具有min 和max 属性的对象，
可用于构建刻度

请参阅下面的工作 sn-p 示例...

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']
});

<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>

【讨论】：