1

我在使用 Google 图表时遇到了一些问题。我有一个谷歌面积图：

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
     data.addColumn('timeofday','time');
     data.addColumn('number','temp');
     data.addRows([
       [[8,0,0],7.875],
       [[8,15,0],7.9399996],
       [[8,30,0],8.1],
       [[8,45,0],8.160001],
       [[9,0,0],8.139999],
       // data every quarter of an hour
       [[7,15,0],9.26],
       [[7,30,0],9.26],
       [[7,45,0],9.18]
     ]);

    var options = {
      title: 'Title',
      vAxis: {
        title: 'AvgTemp',
        titleTextStyle: {color: 'red'},
      }
      hAxis: {
        title: 'Time',
        titleTextStyle: {color: 'red'},
      }
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div2'));
    chart.draw(data, options);
  }
</script>

现在，当我加载页面时，图表的 hAxis 从 0:00 开始，到 24:00 结束，它会破坏图表。我怎样才能使图表从 8:00 开始并在 7:45 结束？

我用视图窗口尝试了一些东西，但我似乎无法让它工作。

谢谢。

4

2 回答 2

1

答案是使用日期时间而不是一天中的时间，这样你需要添加一个日期，这就是 API 知道哪个时间先到的方式。

像这样：

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
     data.addColumn('datetime','time');
     data.addColumn('number','temp');
     data.addRows([

    [new Date(2012,11,3,8,0,0),7.875],
    [new Date(2012,11,3,8,15,0),7.9399996],
    [new Date(2012,11,3,8,30,0),8.1],
    [new Date(2012,11,3,8,45,0),8.160001],
    [new Date(2012,11,3,9,0,0),8.139999],
    //new data every quarter of an hour
    [new Date(2012,11,4,7,0,0),9.42],
    [new Date(2012,11,4,7,15,0),9.26],
    [new Date(2012,11,4,7,30,0),9.26],
    [new Date(2012,11,4,7,45,0),9.18]

     ]);

    var options = {
      title: 'Title',
      vAxis: {  title: 'AvgTemp',
                titleTextStyle: {color: 'red'},

            },
      hAxis: {  title: 'Time',
                titleTextStyle: {color: 'red'},                 
            }

    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div2'));
    chart.draw(data, options);
  }
</script>
于 2012-11-04T18:48:47.127 回答
0 
@oaklodge
producerCountDatatable = new google.visualization.DataTable();
// producerCountDatatable.addColumn('timeofday', 'Timestamp');
producerCountDatatable.addColumn('datetime', 'Time of day(Hours:Minutes)');
producerCountDatatable.addColumn('number', 'ProducerCount');
  for(var i = 0; i < hours.length; i++){
    //If you use timeofday          //producerCountDatatable.addRow([[parseInt(hours[i]),parseInt(minutes[i]),parseInt(seconds[i])],newProducerData[i]]);

//the following is for datetime 
producerCountDatatable.addRow([new Date(timeStampData[i]),newProducerData[i]]);
}
于 2017-01-08T05:05:08.333 回答