Question

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

Answer 1

试试这个......

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

数据表未填充 - 谷歌图表

1 个答案: