使用帶有部分數據的google圖表api創建圖表

我想創建折線圖。目前我的圖形看起來像這樣使用帶有部分數據的google圖表api創建圖表

enter image description here

的數據是實時所以圖表應該在上午09點開始，朝向x軸增加高達16:00

當用戶在下午12點生成圖表。我預期的結果是（注：數據僅可高達12點。）

enter image description here

我無法找到一個方法來產生部分圖表上方。任何想法？

2011-05-31 Manjoor

爲什麼你需要個小時，直到下午4點x如果這只是中午12點？只需獲取當前時間（整小時）並將其用作x軸的最高值。這樣你就可以獲得當前小時的完整圖表。如果用戶在中午加載頁面，圖表將顯示直到中午的數據，否則直到一天結束。如果您需要在下午4點在x軸上縮短時間值，則可以添加將使用當前時間或下午4點的條件，如果是在下午4點以後，但不到第二天上午9點。 – 2011-05-31 21:55:05

這是客戶的要求。我已經按照你在這裏描述的方式顯示圖表。客戶希望以這種方式... – Manjoor 2011-06-14 15:23:25

我希望我能正確理解這一點。評論中的代碼是數據的其餘部分（從下午12點到下午4點）。如果沒有這些數據，圖表會根據您的需要顯示部分圖表。

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string'); 
     data.addColumn('number'); 
     data.addRows(8);  
     data.setValue(0, 0, '9AM'); 
     data.setValue(2, 0, '11AM'); 
     data.setValue(4, 0, '1PM'); 
     data.setValue(6, 0, '3PM'); 
     data.setValue(7, 0, '4PM'); 

     data.setValue(0, 1, 5480); // 9AM 
     data.setValue(1, 1, 5475); // 10AM 
     data.setValue(2, 1, 5490); // 11AM 
     data.setValue(3, 1, 5490); // 12PM 
     /* 
     data.setValue(4, 1, 5500); // 1PM 
     data.setValue(5, 1, 5490); // 2PM 
     data.setValue(6, 1, 5530); // 3PM 
     data.setValue(7, 1, 5560); // 4PM 
     */ 

     var chart = 
      new google.visualization.AreaChart(document.getElementById('chart_div')); 
      chart.draw(data, {width: 500, height: 240, 
          vAxis: {minValue: 5460, maxValue: 5560}, 
          colors: ['#76A4FB'], 
          legend: 'none' 
         }); 
      } 
    </script> 
    </head> 
    <body> 
    <div id="chart_div"></div> 
    </body> 
</html>

我希望這有助於。

來源

2011-06-22 20:50:11

如何爲每個小時添加4個數據行？我需要每15分鐘更新一次。 – Manjoor 2011-06-24 13:01:52

要每15分鐘捕獲一次9-4，您需要30行數據（而不是8行）。如果你想每小時X軸標籤，你需要將它們設置在以下行：0,6,10,14,18,22,26,30 – 2011-06-24 13:25:44

感謝您的答案，這指出我的方式：明確設置'minValue '和'maxValue'值。在我的例子中（這與原始問題非常相似），這些必須在'hAxis'下設置。 – n0nick 2014-01-04 15:39:29

您可以使用jqChart jQuery插件。看到這些樣品：

http://www.jqchart.com/samples/ChartAxes/DateTimeAxis

http://www.jqchart.com/samples/RealTime/LiveData

來源

2011-06-23 17:35:39

使用帶有部分數據的google圖表api創建圖表

回答

相關問題