1

我正在 Google Visualization 中创建一个 SteppedArea 图表，以显示一天中不同时间的队列长度。我的问题是图表中的步骤与相关时间不一致。它们始终是一个数据点。在下面的示例中，我的 dataTable 有 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>

4

1 回答 1

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

      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>

于 2020-01-05T15:02:45.973 回答