Google Chart数据更新时动画不显示的问题解决咨询

问题根源在于你每次执行drawChart时都会重新创建图表实例和数据表格，这导致图表被完全重绘而非基于现有状态更新，因此动画无法触发。要修复这个问题，只需要把图表实例和数据表格提升到全局作用域，初始化时仅创建一次，后续仅更新数据即可。

修改后的完整代码：

<!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>
    // 全局变量：保存图表实例和数据表格
    let chart;
    let data;

    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(initChart);
      
    // 初始化图表：仅执行一次
    function initChart() {
      // 创建基础数据表格
      data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 0],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

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

      // 创建图表实例
      chart = new google.visualization.ColumnChart(document.getElementById('pizzaChart'));
      // 首次绘制图表
      chart.draw(data, options);

      // 启动数据更新定时器
      setInterval(updateChart, 1000);
    }

    // 更新数据并触发动画
    function updateChart() {
      const mushroomData = Math.floor(Math.random() * 11);
      document.getElementById("logger").innerHTML = mushroomData;

      // 仅更新现有数据表格中的值，而非重新创建表格
      data.setValue(0, 1, mushroomData);

      // 再次调用draw方法，此时图表会基于现有状态触发动画
      chart.draw(data, {
        title: 'How Much Pizza I Ate Last Night',
        width: '100%',
        animation: {duration: 1000, easing: 'out'}
      });
    }
  </script>
</body>
</html>

关键修改点说明：

• 将chart和data声明为全局变量，确保在整个脚本生命周期中复用同一个实例
• 拆分出initChart函数，仅在页面加载时执行一次，负责创建数据表格、图表实例和首次绘制
• 新增updateChart函数，仅负责更新数据表格中的特定值，然后调用chart.draw()触发动画
• 使用data.setValue(rowIndex, columnIndex, newValue)方法更新数据，而非重新创建DataTable

这样修改后，每次数据变化时图表会基于现有实例进行过渡动画，而不是完全重绘，动画就能正常显示了。

内容的提问来源于stack exchange，提问作者MeesterZee