2017-04-09 81 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