javascript - Google 饼图在函数内使用 Jquery？

Question

我想在jquery中使用google饼图，并希望根据条件生成图表。

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
var options = {title: 'Sample Chart'};
function drawChart() {
    var data1 = new google.visualization.DataTable();
    data1.addColumn('string', 'col1');
    data1.addColumn('number', 'col2');
    data1.addRow(["sample", 12]);
    data1.addRow(["sample", 24]);
    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data1, options);
}

Jquery 函数，

$.each(result, function(index) {
    $("#tableContents").append("some html generation");
});
 

我希望 data1 在 Jquery 循环期间准备好并在函数末尾绘制。我发现如果我在函数drawchart之外取出代码的data1部分(如下所示)，我得到

在控制台日志中，

无法读取未定义错误的属性“DataTable”

我从drawChart()中删除了代码的data1部分，

var data1 = new google.visualization.DataTable();
data1.addColumn('string', 'col1');
data1.addColumn('number', 'col2');
data1.addRow(["sample", 12]);
data1.addRow(["sample", 24]);

请帮忙，提前致谢。

Answer 1

您可以将结果解析到 DataTable 中，如下所示:

function drawChart() {
    var data1 = new google.visualization.DataTable();
    data1.addColumn('string', 'col1');
    data1.addColumn('number', 'col2');

    $.each(result, function(index) {
        $("#tableContents").append("some html generation");
        // assumes results[index] has "col1Value" and "col2Value" properties
        data1.addRow([results[index].col1Value, results[index].col2Value]);
    });

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data1, options);
}