Question

我正在尝试使用Google Charts API绘制一个简单的条形图，但我对'timeofday'列数据类型的错误感到困惑。谷歌图表文档说，timeofday应该是一个3或4个数字的数组，他们将此作为一个例子

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

当我在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 - 都没有效果

CoreChart 似乎工作得很好您可以使用theme: 'material'使其接近材料图表的外观

参见以下示例......

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的addRows调用没有任何问题。无论数据集如何，水平轴都不对齐。但是，您可以更新 var options 来解决此问题。下面的示例从8a.m格式化hAxis。每隔一小时跳至下午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]]
}

使用Google Chart的timeofday数据类型错误地绘制小时数据。所有小时数都显示在5小时后

2 个答案: