Google可视化空白图表

Question

我的表没有显示任何数据。console.log(dt)正确。如果我打印console.log(dt.toJSON())，它会显示列定义，但没有显示行。怎么啦？

google.load("visualization", "1.1", { packages: ["table"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    var dt = new google.visualization.DataTable();
    dt.addColumn('number', 'Time');
    dt.addColumn('number', 'MAX');
    dt.addColumn('number', 'AVE');
    dt.addColumn('number', 'MIN');
    $.getJSON("4711.json", function(data) {
        dt.addRows(data.measuring.length);
        $.each(data.measuring, function(idx, row) {
            dt.setCell(idx, 0, row["time"]);
            dt.setCell(idx, 1, row["MAX"]);
            dt.setCell(idx, 2, row["AVE"]);
            dt.setCell(idx, 3, row["MIN"]);
        });
    });
    console.log(dt); // correct output !!
    var table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(dt, { showRowNumber: true, width: '100%', height: '100%' });
}

如果我将async设置为false，它就会起作用。

    function drawChart() {
        var jsonData = $.ajax({
            url: "4711.json",
            dataType: "json",
            async: false
        }).responseText;
        var data = JSON.parse(jsonData);

        $.each(data.measuring, function (idx, r) {
             ...
        });
      });
    }

Answer 1

jQuery.getJSON()默认是异步的，所以需要在success回调中放入draw函数调用：

$.getJSON("https://gist.githubusercontent.com/vgrem/d7733bd200b6064873fe/raw/10794476e201f9b68bc9d3caa9fdaa43178f1ad4/4711.json", function(data) {
        dt.addRows(data.measuring.length);
        $.each(data.measuring, function(idx, row) {
            dt.setCell(idx, 0, row["time"]);
            dt.setCell(idx, 1, row["MAX"]);
            dt.setCell(idx, 2, row["AVE"]);
            dt.setCell(idx, 3, row["MIN"]);
        });

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

示例

​

google.load("visualization", "1.1", { packages: ["table"] });
google.setOnLoadCallback(drawChart);


function drawChart() {
    var dt = new google.visualization.DataTable();
    dt.addColumn('number', 'Time');
    dt.addColumn('number', 'MAX');
    dt.addColumn('number', 'AVE');
    dt.addColumn('number', 'MIN');

    $.getJSON("https://gist.githubusercontent.com/vgrem/d7733bd200b6064873fe/raw/10794476e201f9b68bc9d3caa9fdaa43178f1ad4/4711.json", function(data) {
        dt.addRows(data.measuring.length);
        $.each(data.measuring, function(idx, row) {
            dt.setCell(idx, 0, row["time"]);
            dt.setCell(idx, 1, row["MAX"]);
            dt.setCell(idx, 2, row["AVE"]);
            dt.setCell(idx, 3, row["MIN"]);
        });

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

<script src="http://www.google.com/jsapi"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="chart.js"></script>
<style>
#chart_div {
    width: 100% !important;
    height: 400px;
}
</style>
<div id="table_div"></div>

​

或者使用Promise接口：

$.getJSON("https://gist.githubusercontent.com/vgrem/d7733bd200b6064873fe/raw/10794476e201f9b68bc9d3caa9fdaa43178f1ad4/4711.json")
    .done(function(data){
        dt.addRows(data.measuring.length);
        $.each(data.measuring, function(idx, row) {
               dt.setCell(idx, 0, row["time"]);
               dt.setCell(idx, 1, row["MAX"]);
               dt.setCell(idx, 2, row["AVE"]);
               dt.setCell(idx, 3, row["MIN"]);
        });
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(dt, { showRowNumber: true, width: '100%', height: '100%' }); 
    });