嘿，我一眼就看出问题啦！你用的是Google Charts的Material Design版本的Line图表（google.charts.Line），但很遗憾，这个版本的图表并不支持animation配置参数——动画效果只在经典的Core Charts版本里有效。

接下来给你说具体怎么修改，让动画正常工作：

关键修改点 #

• 切换图表包：把加载的'line'包换成'corechart'，经典图表都在这个包里
• 替换图表构造函数：用google.visualization.LineChart代替google.charts.Line
• 调整配置结构：Material图表的chart子对象里的标题配置，在经典图表里要直接放在options根层级
• 移除转换方法：经典图表不需要用google.charts.Line.convertOptions来转换配置
• 修正X轴配置：经典图表用hAxis属性配置X轴，替代原axes.x.0.side的写法

修改后的完整代码 #

JavaScript部分

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Test');
  data.addColumn('number', 'Test 2');
  data.addRows([
    [1, 37.8],
    [2, 30.9],
    [3, 25.4],
    [4, 11.7]
  ]);
  var options = {
    animation: {
      duration: 1000,
      startup: true,
      easing: 'out',
    },
    aggregationTarget: 'category',
    title: 'Test 1',
    subtitle: 'Test 2',
    width: '98%',
    height: 300,
    hAxis: {
      side: 'top'
    }
  };
  var chart = new google.visualization.LineChart(document.getElementById('line_top_x'));
  chart.draw(data, options);
}

HTML部分

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_top_x"></div>

额外说明 #

如果你一定要坚持使用Material风格的图表，那很抱歉，目前Google官方并没有为Material Line图表添加动画支持的计划。这类简化版的Material图表牺牲了一些高级配置来换简洁的风格，动画就是其中之一。如果动画对你来说是刚需，那经典Core Charts版本是更好的选择。

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