2

同じページに複数の 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']})
});
4

2 に答える 2

2

ドキュメント get element id を使用して、以下のように投稿する必要があります

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

同じ id (コンテナ) 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 に答える