谷歌圖表不顯示在瀏覽器/ JSON

我試圖用谷歌圖表繪製一個時間序列，任何幫助將不勝感激！谷歌圖表不顯示在瀏覽器/ JSON

我正在嘗試顯示折線圖。

我有一個HTML文件，正確下載到客戶端瀏覽器，但沒有顯示。該文件被命名爲gasdata.html

有一個PHP文件調用，輸出（通過回聲）一些json文件，以供上述.html文件使用。

在我的JSON中有沒有缺陷（它確實是正確的）？
我在HTML文件中不正確地實現了Google Charts html嗎？

這裏沒有很多移動部件，但我很茫然。任何幫助深表感謝。

gasdata.html：

<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1', {'packages':['corechart']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 

    function drawChart() { 
     var jsonData = $.ajax({ 
      url: "getData.php", 
      dataType:"json", 
      async: false 
      }).responseText; 

     // Create our data table out of JSON data loaded from server. 
     var data = new google.visualization.DataTable(jsonData); 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, {width: 400, height: 240}); 
    } 

    </script> 
    </head> 

    <body> 
    <!--Div that will hold the pie chart--> 
    <div id="chart_div"></div> 
    </body> 
</html>

輸出JSON：

{ 
    cols: [{label: 'Date', type: 'date'}, 
     {label: 'Production', type: 'number'} 
    ], 
    rows: [{c:[{v: new Date(2015, 3, 18)}, 
      {v: 76} 
     ]}, 
     {c:[{v: new Date(2015, 3, 17)}, 
      {v: 75} 
     ]}, 
     {c:[{v: new Date(2015, 3, 16)}, 
      {v: 74} 
     ]}, 
     {c:[{v: new Date(2015, 3, 15)}, 
      {v: 73} 
     ]}, 
     {c:[{v: new Date(2015, 3, 14)}, 
      {v: 72} 
     ]} 
    ] 
}

感謝，

來源

2015-03-18 Travis Millburn

我要補充一點，以上的JSON是通過訪問getdata.php輸出。再次感謝！ – 2015-03-18 21:46:16

你的JSON壞了。 JSON不允許有諸如Date之類的對象，並且對象鍵必須用引號（指定爲字符串）包裝。

請參閱http://json.org/瞭解更多關於JSON允許的內容。

來源

2015-03-18 21:46:58 Evert

謝謝你的回答，Evert。我想知道Google Charts的實現是否更像JSON而不是純JSON。此鏈接似乎表明並不總是需要引號... https://developers.google.com/chart/interactive/docs/reference#dataparam – 2015-03-18 21:50:26

我上面提到的JSON驗證，我應該已經更具體。我已經用上面的當前類JSON輸出以及真正驗證過的JSON與正確的引用包裝一起嘗試了這一點。再次感謝。 – 2015-03-18 21:52:38

@TravisMillburn他們的文檔不提JSON，因爲它不是JSON，它是javascript！ – Evert 2015-03-19 00:12:23

感謝您的幫助。這是我需要它來工作。正如Evert上文所述，JSON格式不正確。我的html也有問題。

這裏是很好的JSON的例子：

{"cols": [{"label":"Date","type":"string"}, 
     {"label":"Production","type":"number"}], 
    "rows": [{"c":[{"v":"3/5/2015"},{"v": 76}]}, 
     {"c":[{"v":"3/4/2015"},{"v": 75}]}, 
     {"c":[{"v":"3/3/2015"},{"v": 74}]}, 
     {"c":[{"v":"3/2/2015"},{"v": 73}]}, 
     {"c":[{"v":"3/1/2015"},{"v": 72}]}]}

另外，這裏是一些不錯的HTML：

<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript"> 


    google.load('visualization', '1', {'packages':['corechart']}); 



     google.setOnLoadCallback(drawChart); 

     function drawChart() { 
     var jsonData = $.ajax({ 
      url: "getLinesData.php", 
      dataType:"json", 
      async: false 
      }).responseText; 


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

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

     chart.draw(data); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="curve_chart"></div> 
    </body> 
</html>

來源

2015-03-19 01:30:37

谷歌圖表不顯示在瀏覽器/ JSON

回答

相關問題