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饼图不支持动画效果。

Google图表动画在图表数据变化时失去可视性

全部回复(1)我来回复