Google圖表動畫在圖表資料變化時失去可視性

Question

我在使Google圖表動畫正常工作方面遇到了麻煩。我認為問題在於圖表不斷重繪而不僅僅是更新數據，但是基於Google的範例程式碼和我有限的JavaScript知識，我不確定如何解決這個問題。我不想包含一個按鈕來更新圖表，因為圖表最終將從資料來源動態更新資料。如何更新我的圖表以正確顯示數據變化的動畫？參考：https://developers.google.com/chart/interactive/d

P粉301523298 · Answer

為了讓圖表從一個資料集動畫到下一個資料集，您需要保留對相同圖表的引用，而不是每次繪製時建立新的圖表。

請參考以下範例...

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(initChart);
var chart;

function initChart() {
  chart = new google.visualization.ColumnChart(document.getElementById('pizzaChart'));
  drawChart();
}

function drawChart() {

  var mushroomData = Math.floor(Math.random() * 11);
  document.getElementById("logger").innerHTML = mushroomData;

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Mushrooms', mushroomData],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2]
  ]);

  var options = {
    title: 'How Much Pizza I Ate Last Night',
    width: '100%',
    animation: {duration: 1000, easing: 'out'}
  };

  chart.draw(data, options);
}

setInterval(drawChart, 1000);

注意：Google圓餅圖不支援動畫效果。