Google Visualization SteppedAreaChart，其中时间未正确对准轴

Question

我正在Google Visualization中创建一个SteppedArea图表，以显示一天中不同时间的队列长度。我的问题是图表中的步骤与相关时间不一致。它们始终是一个数据指出。在下面的示例中，我的dataTable的值为9:00 = 0、12：00 = 3和14:00 = 6，但是结果图表会抵消这些值，因此，当9和12之间的队列实际为0。

这是图表渲染中的错误还是误解了？

我想我的解决方法是抵消我的初始dataTable。

 google.charts.load('current', {'packages':['corechart']});
 google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Queue Length');

  // DataTable of Time and Queue length

      data.addRows([
        [[9,0,0], 0],    
        [[12,0,0], 3], 
        [[14,0,0], 6], 
      ]);
      

      var options = {
        width: 500,
        height: 500,
        legend: {position: 'top'},
        enableInteractivity: false,
        chartArea: {
          width: '85%'
        },
        hAxis: {
          viewWindow: {
            min: [8,0,0],
            max: [15,0,0]
          },
          gridlines: {
            count: -1,
            units: {hours: {format: ['h a']}}
          },
          minorGridlines: {count: 0},
          }
      };

      var chart = new google.visualization.SteppedAreaChart(
         document.getElementById('chart_div'));
      chart.draw(data, options);    
    }

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

   

Answer 1

根据data format获得阶梯式面积图，第一列或x轴列应为字符串。由于使用了timeofday，因此很可能是问题所在。

请参阅以下工作片段，在这里，使用数据视图，它具有一个将timeofday转换为时间字符串的计算列。

请参阅以下工作片段...

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('timeofday', 'Time of Day');
  data.addColumn('number', 'Queue Length');
  data.addRows([
    [
      [9, 0, 0], 0
    ],
    [
      [12, 0, 0], 3
    ],
    [
      [14, 0, 0], 6
    ],
  ]);

  // Create a date formatter
  var formatDate = new google.visualization.DateFormat({
    pattern: 'h a'
  });

  // Create a data view, with calculated column for time string
  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (dt, row) {
      var timeOfDay = dt.getValue(row, 0);
      var dateTime = new Date(2020, 1, 1, timeOfDay[0], timeOfDay[1], timeOfDay[2]);
      return formatDate.formatValue(dateTime);
    },
    label: data.getColumnLabel(0),
    type: 'string'
  }, 1]);
  
  var options = {
    width: 500,
    height: 500,
    legend: {
      position: 'top'
    },
    enableInteractivity: false,
    chartArea: {
      width: '85%'
    },
    hAxis: {
      viewWindow: {
        min: [8, 0, 0],
        max: [15, 0, 0]
      },
      gridlines: {
        count: -1,
        units: {
          hours: {
            format: ['h a']
          }
        }
      },
      minorGridlines: {
        count: 0
      },
    }
  };

  var chart = new google.visualization.SteppedAreaChart(
    document.getElementById('chart_div')
  );
  chart.draw(view, options);
}

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