Question

我试图在同一页面上显示多个谷歌饼图。

这样做时我遇到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']})
    });

});

或者，如果我在绘图功能中进行迭代，则饼图的输出变得非常奇怪，它不再是弧，而是弧的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

您必须使用文档获取元素ID并在下面发布

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

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

Answer 2

问题在于您拨打var chart = new google.visualization.PieChart(this);

的方式

问题在于您应该传递页面上的元素，而是传递this，这可能只是window。如果你有一个id为＆＃34;容器＆＃34;你想要使用，你可以这样做：

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

您可以查看示例here

Google饼图：未捕获错误：未定义容器

2 个答案: