Google 以月为单位绘制 hAxis 网格线

Question

我的折线图有问题 - 我的图表日期值是从 4 月中旬到 6 月中旬，我想让 hAxis 网格线仅显示我数据中月份之间的边界。手动我是这样做的：

hAxis: {
      textStyle: { fontSize: 10, color: '#999999' },
      gridlines:{ color: '#eee' },
      textPosition: 'in',
      baselineColor: '#eee',
      format: 'M',
      ticks: [
        new Date(2016, 4, 1),
        new Date(2016, 5, 1),
        new Date(2016, 6, 1)
      ]
    }

但我希望它自动适合我的数据。有人可以帮忙吗？

Answer 1

在绘制图表之前阅读数据，
并收集您需要显示的报价

在以下工作片段中，
将找到的每个月的第一天添加到 tickMarks

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', '2015');
    data.addColumn('number', '2016');
    data.addRows([
       [new Date('04/20/2016'), 200, 210],
       [new Date('04/30/2016'), 190, 220],
       [new Date('05/06/2016'), 205, 200],
       [new Date('05/18/2016'), 220, 230],
       [new Date('05/24/2016'), 212, 210],
       [new Date('06/01/2016'), 185, 193],
       [new Date('06/16/2016'), 196, 207]
    ]);

    var tickMarks = [];
    var curMonth = -1;
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      var testDate = data.getValue(i, 0);
      if (testDate.getMonth() > curMonth) {
        curMonth = testDate.getMonth();
        tickMarks.push(new Date(testDate.getFullYear(), testDate.getMonth(), 1));
      }
    }

    var options = {
      height: 400,
      hAxis: {
        textStyle: { fontSize: 10, color: '#999999' },
        gridlines:{ color: '#eee' },
        textPosition: 'in',
        baselineColor: '#eee',
        format: 'M',
        ticks: tickMarks
      }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});

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

Google 以月为单位绘制 hAxis 网格线

Google charts hAxis grid lines at months

linechart

google-visualization

gridlines