0

我有一个谷歌饼图，每 5 秒刷新一次。每次刷新时，饼图都会扩大。然后在 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 回答