2

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

这样做时出现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']})
});
4

2 回答 2

2

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

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

确保你有相同的 id (container) html div 标签，否则会导致错误

于 2015-04-20T13:42:23.913 回答
0

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

问题是您应该在页面上传递一个元素，但您传递this的可能只是window. 如果您希望使用 id 为“container”的元素，则可以这样做：

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

你可以在这里查看一个例子

于 2015-04-20T13:40:50.740 回答