Google图表动画在图表数据变化时失去可视性-PHP中文网问答

我在使Google图表动画正常工作方面遇到了麻烦。我认为问题在于图表不断重绘而不仅仅是更新数据，但是基于Google的示例代码和我有限的JavaScript知识，我不确定如何解决这个问题。我不想包含一个按钮来更新图表，因为图表最终将从数据源动态更新数据。如何更新我的图表以正确显示数据变化的动画？

参考：https://developers.google.com/chart/interactive/docs/animation

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
  <div id="pizzaChart" style="overflow: hidden"></div>
  <p id="logger"></p>

  <script>

    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(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'}
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('pizzaChart'));
      chart.draw(data, options);
    }

    setInterval(drawChart, 1000);

  </script>
</body>
</html>

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);