如何使用Google Visualization API描述日常圖表？

我試圖用谷歌可視化API來描述日線圖。 http://code.google.com/apis/visualization/documentation/reference.html 如何使用Google Visualization API描述日常圖表？

DataTable對象是這樣的。

[ 
{date:'3/1', value:'1000'}, 
{date:'3/2', value:'1500'}, 
{date:'3/3', value:'1200'}, 
{date:'3/4', value:'1300'}, 
{date:'3/5', value:'1400'}, 
{date:'3/6', value:'1100'}, 
{date:'3/7', value:'1200'} 
]

有了上面的數據，該圖顯示了一週的記錄。

即使某些數據不足，我也想描述周圖。

[ 
{date:'3/1', value:'1000'}, 
{date:'3/2', value:'1500'}, 
{date:'3/5', value:'1400'}, 
{date:'3/7', value:'1200'} 
]

我要描述與上面的數據一週圖表，這意味着應該有7天爲x軸，並且在殼體沒有數據，該行應是僅與現有的連接數據。

謝謝您的信息。我嘗試'interpolateNulls'，但不符合我的預期。

使用下面的代碼，3/2和3/4之間的換行符。我想要連接3/2-3/4。

<html> 
    <head> 
    <script type='text/javascript' src='https://www.google.com/jsapi'></script> 
    <script type='text/javascript'> 
    google.load("visualization", "1.0", {packages:["imagechart"]}); 
    </script> 
    <script type='text/javascript'> 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var dataTable = new google.visualization.DataTable(); 
     dataTable.addColumn('string'); 
     dataTable.addColumn('number'); 
     var data = [['3/1',1000],['3/2',1300],['3/3',null],['3/4',1800],['3/5',900],['3/6',1200],['3/7',1000]]; 
     dataTable.addRows(data); 
     var options = {cht: 'lc', chds:'0,3000', interpolateNulls: true}; 

     var chart = new google.visualization.ImageChart(document.getElementById('chart_div')); 
     chart.draw(dataTable, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id='chart_div'></div> 
    </body> 
</html>

來源

2011-03-18 yellowpecker

我知道這不是您的問題的答案，但請查看[flot]（http://code.google.com/p/flot/）。就我的經驗而言，它可以處理缺乏數據的好處。 – David 2011-03-18 13:52:19

爲每週的每個日期添加一個條目，並將缺失值的值設置爲空。

[ 
{date:'3/1', value:'1000'}, 
{date:'3/2', value:'1500'}, 
{date:'3/3', value: null }, 
{date:'3/4', value: null }, 
{date:'3/5', value:'1400'}, 
{date:'3/7', value:'1200'} 
]

行char的配置選項之一是interpolateNulls。使用

interpolateNulls: True

在您的繪圖方法中。編輯：圖表類型必須是一個LineChart而不是一個ImageLineChart的interpolateNulls工作。

有關配置選項的文檔是here。

來源

2011-03-18 14:13:32 Jelly

謝謝，我嘗試interpolateNulls，但不起作用。我添加了我所做的問題。你能檢查出來嗎？ – yellowpecker 2011-03-19 02:03:37

謝謝！是的，我應該使用LineChart。現在它按我的預期工作。 – yellowpecker 2011-03-20 00:05:56

@yellowpecker好！我很高興那就是你需要的。如果我的答案是您最終使用的答案，您能否將其標記爲已接受的答案？謝謝！ – Jelly 2011-03-20 14:18:51

在我的opnion只是在循環內創建一個控制結構來驗證所有值.. foreach值驗證是否是null。

如何生成這些數據？
你是從某個地方讀的，還是手工輸入的？

在您的圖表：

chart.draw(data, {interpolateNulls: True, width: 400, height: 240, title: 'Company Performance'});

我不考我自己，我希望這種幫助。

來源

2011-03-18 14:52:38 B4NZ41

謝謝，我嘗試interpolateNulls，但不起作用。我添加了我所做的問題。你能檢查出來嗎？ – yellowpecker 2011-03-19 02:05:26

我已經檢查過了，看起來像現在工作，是嗎？與interpolateNulls很好用，很好的解決了這個問題。 ;） – B4NZ41 2011-03-21 12:40:37

如何使用Google Visualization API描述日常圖表？

回答

相關問題