javascript - 谷歌图表在多个时不起作用

Question

我的代码如下:

var width = $(document).width();
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var general = new google.visualization.DataTable();
    var terming = new google.visualization.DataTable();
    var categorizing = new google.visualization.DataTable();

    general.addColumn("string", "property");
    general.addColumn("number", "value");

    general.addRows([
        ["Tamamlanan", 128],
        ["Kalan", 800]
    ]);

    terming.addColumn("string", "property");
    terming.addColumn("number", "value");

    terming.addRows([
        ["Tamamlanan", 128],
        ["Kalan", 800]
    ]);

    categorizing.addColumn("string", "property");
    categorizing.addColumn("number", "value");

    categorizing.addRows([
        ["Tamamlanan", 128],
        ["Kalan", 800]
    ]);


    var options_12 = {
        "width": width/1,
        "height": 250
    };

    var options_6 = {
        "width": width/3,
        "height": 250
    };

    var general = new google.visualization.PieChart(document.getElementById('general'));
    var terming = new google.visualization.PieChart(document.getElementById('terming'));
    var categorizing = new google.visualization.PieChart(document.getElementById('categorizing'));

    general.draw(general, options_12);
    terming.draw(terming, options_6);
    categorizing.draw(categorizing, options_6);
}

但是，多个 DataTable() 类型不起作用，并且会引发如下错误:

You called the draw() method with the wrong type of data rather than a DataTable or DataView

我应该使用多个 drawChart() 函数来绘制多个图表吗？奇怪的是它不起作用。 Here's a fiddle如果你想看的话。

Answer 1

您正在用图表覆盖数据，因此您将图表添加到图表中:

var general = new google.visualization.DataTable();
var terming = new google.visualization.DataTable();
var categorizing = new google.visualization.DataTable();
.....
var general = new google.visualization.PieChart(document.getElementById('general'));
var terming = new google.visualization.PieChart(document.getElementById('terming'));
var categorizing = new google.visualization.PieChart(document.getElementById('categorizing'));

general.draw(general, options_12);
terming.draw(terming, options_6);
categorizing.draw(categorizing, options_6);

使用不同的变量名称来解决此问题。例如:

var general = new google.visualization.DataTable();
var terming = new google.visualization.DataTable();
var categorizing = new google.visualization.DataTable();
.....
var generalChart = new google.visualization.PieChart(document.getElementById('general'));
var termingChart = new google.visualization.PieChart(document.getElementById('terming'));
var categorizingChart = new google.visualization.PieChart(document.getElementById('categorizing'));

generalChart.draw(general, options_12);
termingChart.draw(terming, options_6);
categorizingChart.draw(categorizing, options_6);