2016-03-06 49 views
0

我正試圖用谷歌圖表的幫助生成一個線圖。但是,我看到「表格沒有列」。我試着在谷歌網站上給出的例子,並觀察相同。以下是我的代碼:Google圖表在所有情況下都會打印「表格沒有列」?

<html> 
<head> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 
    google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var jsonDataString = "{\"cols:\":{\"Time\":\"\",\"Sensor-1\":\"\",\"Sensor-2\":\"\",\"Sensor-3\":\"\",\"Sensor-4\":\"\"},\"rows\":[{\"1\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"2\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"3\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"4\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"5\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"6\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"7\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"8\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"9\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"10\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]}]}"; 
    var jsonData = JSON.parse(jsonDataString); 
    console.log(jsonData); 
    var data = new google.visualization.DataTable(jsonData); 

    var options = { 
     title: 'time - temp', 
     curveType: 'function', 
     legend: { position: 'bottom' } 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 

    chart.draw(data, options); 

    } 
</script> 
</head> 
<body> 
<div id="curve_chart" style="width: 900px; height: 500px"></div> 
</body> 
</html> 

任何想法,我哪裏會出錯? 謝謝。

+0

該文件還沒有準備好。檢查出接受的答案http://stackoverflow.com/questions/556406/google-setonloadcallback-with-jquery-document-ready-is-it-ok-to-mix –

+1

@EricGuan Nopes,不應該是這樣因爲setOnLoadCallback是在文檔準備就緒和google API加載後觸發的。 –

回答

0

您的JSON對象格式不正確,無法正確生成數據表。所接受的JSON格式是:

{ 
    "cols": [ 
     {"label":"Topping","type":"string"}, 
     {"label":"Slices","type":"number"} 
     ], 
    "rows": [ 
     {"c":[{"v":"Mushrooms"},{"v":3}]}, 
     {"c":[{"v":"Onions"},{"v":1}]}, 
     {"c":[{"v":"Olives"},{"v":1}]}, 
     {"c":[{"v":"Zucchini"},{"v":1}]}, 
     {"c":[{"v":"Pepperoni"},{"v":2]} 
     ] 
} 

使用對象,其中X =你的列數,並且「行」陣列的「COLS」陣列含有X數目的嵌套式JSON對象,包含「C的Y個'節點,其中Y =您的行數,並且在每個'c'節點內,Z個'v'節點,其中Z =您的列數。

您應該檢查谷歌文檔在這裏:

Google JSON DATA

PS嘗試通過在我的例子中提供的一個替代你的JSON字符串,你會看到,因爲我不認爲你的線圖會被吸引查看代碼中的任何錯誤。

相關問題