2017-04-09 80 views
0

我想繪製使用谷歌圖表和一些動態生成的JSON的圖形和表格。我已經改變了輸出以嘗試匹配谷歌的要求,但我仍然努力爭取這個工作。我花了無數小時試圖弄清楚這一點,但我終於擊中了一堵磚牆。我已經包含了生成的JSON的一個例子。數據表未被填充 - 谷歌圖表

我得到一個空白空間,圖表應該是一個空的空間,並且一個可見的標題表格中沒有數據(但大致正確的行數)。

<!DOCTYPE html> 
<head> 
<title>Nation stats analyser</title> 
     <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></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.charts.load('current', {'packages':['corechart', 'table']}); 

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

    function drawChartAndTable() { 
    var jsonData = $.ajax({ 
     url: "data.php", 
     dataType: "json", 
     }).done(function (jsonData) { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Category'); 
      data.addColumn('number', 'Value'); 

      Object.keys(jsonData).forEach(function (row) { 
       data.addRow([ 
        row.Category 
        row.Value 
       ]); 
      }); 
      var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
      chart.draw(data, {width: 400, height: 240}); 

      var table = new google.visualization.Table(document.getElementById('table_div')); 
      table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); 
     }); 
    } 

    setTimeout(drawChartAndTable(), 100); 


    </script> 
</head> 
<body> 
<div id="chart_div"></div> 
<div id="table_div"></div> 
</body> 

[{"Category":"Anarchy","Value":317}, 
{"Category":"Capitalizt","Value":108},{"Category":"New York Times 
Democracy","Value":918},{"Category":"Benevolent 
Dictatorship","Value":44},{"Category":"Inoffensive Centrist 
Democracy","Value":1993}] 
+0

什麼是錯誤確實它顯示在瀏覽器控制檯? –

+0

沒有顯示錯誤。 –

+0

'console.log(data)的輸出是什麼;' –

回答

0

試試這個...

 jsonData.forEach(function (row) { 
      data.addRow([ 
       row.Category, 
       row.Value 
      ]); 
     }); 
+0

'jsonData'是一個數組... – WhiteHat

+0

可悲的是沒有工作。這給了我一個「display.php:28 Uncaught SyntaxError:意外的標識符」錯誤的row.Value(雖然奇怪不是row.Category。) –

+0

逗號','丟失'Category'後 – WhiteHat