Круговая диаграмма, расширяющаяся при каждом обновлении

Question

У меня есть круговая диаграмма Google, которая обновляется каждые 5 секунд. При каждом обновлении круговая диаграмма расширяется. Затем после обновления 5-6 оно исчезает. Я столкнулся с этой проблемой во всех browsers.Please советует

/** 
* 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

Если вы явно не устанавливать размеры в настройках графика или на его контейнер DIV в CSS, то вы получите процесс, который выглядит примерно так:

выборки размеров контейнера -> использование в качестве размеров диаграммы -> браузер расширяет контейнер из-за края/дополнение -> перерисовывать -> извлечь (большой) размеры контейнера -> повторить

Вы должны точно установить размеры диаграмму либо в параметрах диаграммы, либо в 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); 
}