JSON來的DataTable爲谷歌可視化輸出錯誤

我想創建使用谷歌可視化從CSV圖表。我已經使用PHP解析了CSV文件並輸出了我需要的數據作爲Json。具體而言，第1列包含格式爲「日/月/年」和第2列含有日期價格格式化爲2 D.P.就像下面：JSON來的DataTable爲谷歌可視化輸出錯誤

[["Date","Close"], 
["29\/01\/1985","1,292.62"], 
["30\/01\/1985","1,287.88"], 
["31\/01\/1985","1,286.77"], 

... 

["30\/04\/2015","17,840.52"], 
["01\/05\/2015","18,024.06"]]

正如你可以看到上面的代碼包含了一個名爲「日期」和「關閉」的標題。我有兩個文件，一個包含名爲「json.php」 JSON的代碼和第二名爲「chart.php」含有呼籲通過Ajax JSON的代碼腳本。第二個文件中的代碼看起來是這樣的：

<html> 
<head> 
<title>Google Chart</title> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['annotationchart']}]}"></script> 
<script type='text/javascript'> 
     google.load('visualization', '1', { 
      'packages': ['annotationchart'] 
     }); 
     google.setOnLoadCallback(drawChart); 

     function drawChart() { 
      var jsonData = $.ajax({ 
       url: "json.php", 
       dataType: "json", 
       async: false 
      }).responseText; 
      var array = JSON.parse(jsonData); 
      var data = new google.visualization.arrayToDataTable(array); 
      var chart = new google.visualization.AnnotationChart(document.getElementById('chart')); 
      var options = { 
      displayAnnotations: true 
     }; 

     chart.draw(data, options); 
     } 
</script> 
</head> 
<body> 
    <div id="chart" style="width: 900px; height 500px;"></div> 
</body> 
</html>

我的問題是，一旦我執行腳本並刷新網站，圖表沒有出現，而不是我得到一個錯誤的數據必須至少有兩個列。我直接放在數據到DIV使用：

document.getElementById("chart").innerHTML = data;

什麼似乎發生的是JSON的代碼不被轉換成數據表，改爲：

[object Object]

我試圖把JSON的代碼直接插入DataTable而不將其轉換成一個數組使用前：

var data = new google.visualization.DataTable(jsonData);

並且仍然輸出是相同的，[object Object]出現。我回去把從調用中接收到的數據直接放到div中，Json看起來應該是這樣。問題似乎是轉換到DataTable中，我不知道爲什麼。真的很感激任何提示。謝謝！！

來源

2015-05-03 Ava Barbilla

我覺得你有一些問題在這裏。

如果您有dataType : 'json'則JSON.parse是多餘的。 JSON.parse用於將字符串解析爲 JSON。
你需要date和number格式，以便創建一個AnnotationChart定義索姆數據類型。 Google無法猜測哪些列和哪些數據是什麼。它需要指定列並根據列數據類型以適當的格式傳送數據。
在JSON的數據是不是在正確的格式本身。日期不能立即解析，數字將被解析爲字符串。

所以忘了JSON.parse和一個神奇的JSON - >數組 - >適當的DataTable AnnotationChart能夠使用。從問題的小提琴

var row, date, data = new google.visualization.DataTable(); 
data.addColumn('date', 'Date'); 
data.addColumn('number', 'Close'); 
for (var i=1;i<jsonData.length;i++) { 
    row = jsonData[i]; 
    date = row[0].split('/'); 
    data.addRow([ 
     new Date(date[2], date[1], date[0]), 
     parseFloat(row[1]) 
    ]); 
}

你的代碼 - >http://jsfiddle.net/mvjcff8c/

來源

2015-05-04 07:04:36 davidkonrad

哇!!：做到這一點，而不是奇蹟般有效。現在我知道數據總是要正確格式化，在這種情況下用javascript循環。非常感謝！！ –

對不起，您再次遇到問題。我在JSFiddle中一遍又一遍地測試了這個場景，它工作正常。一旦我在本地主機中實現代碼並處理腳本，一切都會順利進行，直到出現圖形並顯示錯誤「_undefined不是函數_」。我嘗試刪除列標題並放置'i = 0'而不是'i = 1'，但沒有任何反應。有什麼建議麼？最好的祝福！！ –

不用擔心。問題是'var jsonData'，因爲它無法正確處理。解決方法是首先解析它，然後使用var jsonData = JSON.parse（json）;將數據傳遞給函數; –

JSON來的DataTable爲谷歌可視化輸出錯誤

回答

相關問題