使用 Google 图表的时间数据类型会错误地绘制小时数据。所有小时显示晚 5 小时

Question

我正在尝试使用谷歌图表API绘制一个简单的条形图，但我对"timeofday"列数据类型做错了什么感到非常困惑。谷歌图表文档说，一天中的时间应该是一个由3或4个数字组成的数组，他们以此为例。

"例如，上午 8：30 的时间将是：[8， 30， 0， 0]，第 4 个值是可选的（[8， 30， 0] 将输出相同的时间值）。

当我在 JSFiddle 中打开他们的示例时，您在上面引用的示例中看到的时间在条形图中显示为"3：30：45"这非常令人困惑。我输入的所有时间数据都显示为比我输入的小时值晚 5 小时。上面示例中的小时值为 8，但在绘制时变为 3。

这是输入数据的函数

function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Emails Received');
      data.addRows([
        [[7, 30, 0], 5],
         [[9, 30, 0], 12],
          [[20, 30, 0], 3],
           [[22, 30, 0], 22]
      ]);
      var options = google.charts.Bar.convertOptions({
        title: 'Total Emails Received Throughout the Day',
        height: 450
      });
      var chart = new google.charts.Bar(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

Answer 1

它一定是材质图表的错误

如果在绘制
之前console.log格式化值--或--
另外绘制corechart

这会导致工具提示中的值在"材料"图表上正确显示

但似乎没有什么可以解决轴值
尝试添加hAxis.format和hAxis.ticks - 都不起作用

核心图表似乎工作正常
您可以使用theme: 'material'使其接近材质图表的外观

请参阅以下示例...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('timeofday', 'Time of Day');
    data.addColumn('number', 'Emails Received');
    data.addRows([
      [[7, 30, 0], 5],
      [[9, 30, 0], 12],
      [[20, 30, 0], 3],
      [[22, 30, 0], 22]
    ]);
    console.log(data.getFormattedValue(0, 0), (new Date()).getTimezoneOffset());
    console.log(data.getFormattedValue(1, 0), (new Date()).getTimezoneOffset());
    console.log(data.getFormattedValue(2, 0), (new Date()).getTimezoneOffset());
    console.log(data.getFormattedValue(3, 0), (new Date()).getTimezoneOffset());
    var options = {
      title: 'Total Emails Received Throughout the Day',
      height: 450,
      hAxis: {
        format: 'H:mm',
        ticks: [data.getValue(0, 0), data.getValue(1, 0), data.getValue(2, 0), data.getValue(3, 0)]
      },
      theme: 'material'
    };
    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
    var chart2 = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
    chart2.draw(data, options);
  },
  packages:['bar', 'corechart']
});

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

Answer 2

addRows 调用没有任何问题。无论数据集如何，水平轴都不会对齐。 但是，您可以更新 var 选项来解决此问题。下面的示例将 hAxis 的格式从上午 8 点设置为下午 2 点，每隔一小时跳过一次。关键是勾选一天中的时间数据。 有关更多信息，请参阅 Google 文档：https://developers.google.com/chart/interactive/docs/gallery/barchart 并向下滚动到 hAxis.ticks 部分。

hAxis: { 
  title: 'Time of day',
      ticks: [[8,0,0],[10,0,0],[12,0,0],[14,0,0]]
}