Google 以时间为轴的可视化 SteppedAreaChart 未正确对齐

Question

我正在 Google 可视化中创建一个 SteppedArea 图表，以显示一天中不同时间的队列长度。我的问题是图表中的步骤与相关时间不一致。他们总是一个数据点。在下面的示例中，我的数据表有 9:00 = 0、12:00 = 3 和 14:00 = 6，但是生成的图表偏移了这些值，所以看起来 9 和 12 之间的队列是3 当它真的应该是 0.

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

我想我的解决方法是抵消我的初始数据表。

 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

我已经通过一个视图移动了数据，该视图似乎为我提供了正确的图表。请参阅之前和之后显示的示例。请注意，我必须在数据集的末尾添加一个虚拟点，否则最后一个点会被遗漏。我还必须假设第一个点为零，这对我来说是可以接受的。除非出现另一个想法，否则我会接受这个。

    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], 2],    
        [[11,30,0], 1], 
        [[12,0,0], 2], 
        [[13,0,0], 3], 
        [[14,0,0], 2], 
      ]);
      

      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);    

 // need to add dummy point to end.
 data.addRows([
        [[23,59,0], 0] 
      ]);
// use a view to shift the data so that it returns the value from previous row.
   var data2 = new google.visualization.DataView(data);
   data2.setColumns([0,
                   {calc: function (dt, row) { 
                     if (row === 0) {return 0}
                     else {return dt.getValue(row-1,1)}
                     },
                   label: 'Queue Moved',type: 'number'}
                   
                   ]);


 var chart2 = new google.visualization.SteppedAreaChart(
         document.getElementById('chart2_div'));
      chart2.draw(data2, options);   
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   
  <h1>Has Wrong transition times</h1>  
  <div id="chart_div"></div>
   <h1>Looks Correct : Has transition shifted via view</h1>  
  <div id="chart2_div"></div>

Google 以时间为轴的可视化 SteppedAreaChart 未正确对齐

Google Visualization SteppedAreaChart with time as axis incorrectly aligned

charts

google-visualization

timeofday