0

5 秒ごとに更新される Google 円グラフがあります。更新するたびに、円グラフが拡大しています。その後、5〜6回更新すると消えます。私はすべてのブラウザでこの問題に直面しています.アドバイスしてください

/**
* Function for Google PieChart
**/   
    function drawVisualization() {
      // Create and populate the data table.
      var data = google.visualization.arrayToDataTable([
        // dynamic data
      ]);

      // Create and draw the visualization.
      new google.visualization.PieChart(document.getElementById('visualization')).
          draw(data, {title:"So, how was your day?"});
    }

    /*
     *Extjs Pannel for Pie Chart
    **/
    {xtype:'label',
             id:'pannelid',
             width:'100%',
             html : '<table width="100%"><tr><tr> <td> <div id="visualization" align="left"> </div></td></tr></table>'
    }

    /**
     *For refreshing Pie Chart every 5 sec
    **/
    setInterval(function(){
    drawVisualization();
    },5000);
4

1 に答える 1

2

チャートのオプションまたは CSS のコンテナー div でディメンションを明示的に設定しない場合、次のようなプロセスが得られます。

コンテナの寸法を取得 -> グラフの寸法として使用 -> マージン/パディングのためにブラウザがコンテナを拡張 -> 再描画 -> (より大きな) コンテナの寸法を取得 -> 繰り返し

これを修正するには、チャートのオプションまたはコンテナ要素の CSS でチャートの寸法を明示的に設定する必要があります。

new google.visualization.PieChart(document.getElementById('visualization')).
    draw(data, {
        title: "So, how was your day?",
        height: 300,
        width: 400
    });

また：

#visualization: {
    height: 300px;
    width: 400px;
}

drawVisualization 関数を複数回呼び出すと、新しい DataTables とチャート オブジェクトが何度も作成され、ガベージ コレクションが行われない可能性があるため、問題が発生する可能性があります。毎回新しいオブジェクトを作成するよりも、DataTable のデータを更新し、既存のグラフを新しいデータで再描画することをお勧めします。

drawVisualization () {
    var data = ...;
    var chart = ...;
    chart.draw(...);

    setInterval(function () {
        // refresh data and redraw chart
    }, 5000);
}
于 2013-08-08T18:41:13.180 に答える