Google Charts hAxis

Question

如果我将日期值用于Google Charts柱形图的hAxis，则标签会显示在条形图组分隔符下方（请参见下图）。如果我使用字符串，这不会发生。 有没有人想出如何使日期标签显示在每个条形组下方的中心位置？

Answer 1

您可以为ticks选项提供自己的hAxis ...

使用每个刻度/标签的数据中的日期...

var ticks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
  ticks.push(data.getValue(i, 0));
}

然后在选项中分配......

hAxis: {
  ticks: ticks
},

请参阅以下工作代码段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'x');
  data.addColumn('number', 'y0');
  data.addColumn('number', 'y1');
  data.addRows([
    [new Date(2017, 07, 08), 200, 210],
    [new Date(2017, 07, 15), 190, 220],
    [new Date(2017, 07, 22), 205, 200]
  ]);

    var ticks = [];
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      ticks.push(data.getValue(i, 0));
    }

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, {
    chartArea: {
      bottom: 24,
      height: '100%',
      left: 48,
      right: 96,
      top: 24,
      width: '100%'
    },
    hAxis: {
      ticks: ticks
    },
    height: '100%',
    title: 'Title',
    width: '100%'
  });
});

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