【问题标题】:Data table not being populated - google charts未填充数据表 - 谷歌图表
【发布时间】:2017-04-09 12:03:51
【问题描述】:

我正在尝试使用谷歌图表和一些动态生成的 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}]

【问题讨论】:

  • 浏览器控制台显示的错误是什么?
  • 没有显示错误。
  • console.log(data);的输出是什么
  • loader.js 之前加载jquery.min.js 并让我知道状态。
  • 感谢接受的答案,它现在可以工作了。感谢您的帮助。

标签: javascript json google-visualization


【解决方案1】:

试试这个……

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

【讨论】:

  • 很遗憾没用。这给了我一个 row.Value 的“display.php:28 Uncaught SyntaxError: Unexpected identifier”错误(虽然奇怪的是不是 row.Category。)
  • 逗号 ,Category 之后丢失
  • 我相信这是修复它的更改。谢谢。接受答案。
猜你喜欢
  • 2023-01-25
  • 1970-01-01
  • 1970-01-01
  • 2013-09-17
  • 2011-05-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-11-29
相关资源
最近更新 更多