Google Pie Chart : Uncaught Error: Container is not defined

Question

我正在尝试在同一页面上显示多个 google 饼图。

这样做时出现 Uncaught Error: Container is not defined 错误。我该如何解决这个问题？

我的代码：

function drawChart()
{
        var completeness = $(this).attr('data-completeness');

        var data = google.visualization.arrayToDataTable([
            ['Nom',    'Valeur'],
            ["Profil rempli à ", completeness],
            ['Manque', 100 - completeness]
        ]);

        var options = {
              ...
        };

        var chart = new google.visualization.PieChart(this);
        chart.draw(data, options);
}

$(function(){
    $('.piechart').each(function(){
        google.load('visualization', '1', {callback : drawChart, 'packages':['corechart']})
    });

});

或者，如果我在 drawchart 函数中进行迭代，饼图的输出会变得非常奇怪，它不再是弧线而是大约 5% 的弧线（如果我不动态设置完整性就不会发生这种情况） :

function drawChart(elem)
{
    $(elem).each(function(){
        {#var completeness = {{ completeness }};#}
        var completeness = $(this).attr('data-completeness');

        console.log(completeness);

        var data = google.visualization.arrayToDataTable([
            ['Nom',    'Valeur'],
            ["Profil rempli à ", completeness],
            ['Manque', 100 - completeness]
        ]);

        var options = {
            backgroundColor: { fill:'transparent'},
            pieSliceBorderColor : 'transparent',
            pieHole: 0.8,
            legend: {position: 'top'},
            width: 220,
            height: 220,
            tooltip: {trigger: 'none'},
            pieStartAngle: -90,
            pieSliceTextStyle :{fontsize : 16, color: 'transparent'},
            slices: {
                0: { color: '#09b4ff'},
                1: { color: '#444'}
            },
            chartArea : {width: '90%', height: '90%'}
        };

        var chart = new google.visualization.PieChart(this);
        chart.draw(data, options);
    });
}

$(function(){
    google.load('visualization', '1', {callback : function(){drawChart('.piechart');}, 'packages':['corechart']})
});

Answer 1

问题是你打电话的方式var chart = new google.visualization.PieChart(this);

问题是您应该在页面上传递一个元素，但您传递的是 this，这很可能只是 window。如果您有一个 id 为 "container" 的元素并希望使用，您可以改为这样做：

var chart = new google.visualization.PieChart(document.getElementById('container'));

你可以看看例子here

Answer 2

您必须使用文档获取元素 ID 和 post 如下所示

var chart = new google.visualization.PieChart(document.getElementById('container'))

确保你有相同的id（容器）html div标签，否则会导致错误

Google Pie Chart : Uncaught Error: Container is not defined

Google Pie Chart : Uncaught Error: Container is not defined

javascript

jquery

pie-chart

google-pie-chart