Question

我有一个谷歌饼图，每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);

Answer 1

如果没有在图表的选项中明确设置尺寸或在CSS中的容器div上显示尺寸，那么您将获得如下所示的过程：

获取容器尺寸 - ＆gt;用作图表尺寸 - ＆gt;浏览器由于边距/填充而扩展容器 - ＆gt;重绘 - ＆gt;获取（更大）容器尺寸 - ＆gt;重复

您必须在图表的选项或容器元素的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);
}

饼图在每次刷新时扩展

1 个答案: