谷歌圖表，時間開始於8:00，結束於7:45

Question

我在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結束？

我已經嘗試了一些與視圖窗口的東西，但我似乎無法使其工作。

謝謝。

Answer 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> 

Answer 2

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