数据表未填充-Google图表

Question

我正在尝试使用Google图表和一些动态生成的JSON绘制图形和表格。 我已经更改了输出以尝试满足Google的要求，但我仍在努力使其正常工作。 我花了无数小时试图解决这个问题，但是我终于碰到了墙。 我提供了生成的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}]

Answer 1

尝试这个...

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

数据表未填充-Google图表

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-04-09 12:17:44

数据表未填充-Google图表

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-04-09 12:17:44

解决方案1
0 已采纳 2017-04-09 12:17:44