渲染谷歌折线图，曲线类型未设置且动画未按预期工作

我正在绘制谷歌折线图，效果很好。该图表使用正确的数据绘制。但是，当我更改 curveType 的选项时，“函数”选项不会将图表从直线更改为曲线。此外，动画功能根本不执行任何操作。我在这里错过了什么吗？这是我的代码：

google.charts.load('current', {
     'packages': ['line']
 });
 google.charts.setOnLoadCallback(drawChart);

     function drawChart() {
  var data = google.visualization.arrayToDataTable([
      ['Year', 'Number']
      , ['2005',    61372]
      , ['2006',    65425]
      , ['2007',    71389]
         , ['2008', 75173]
         , ['2009', 75554]
         , ['2010', 75174]
         , ['2011', 74033]
         , ['2012', 72225]
         , ['2013', 68954]
         , ['2014', 67462]
     , ])
 }; 
 var options = { 
    animation:{
    duration: 1000,
    easing: 'out',
  },  curveType: 'function'
     , smoothline: 'true'
     , width: 875
     , height: 400
     , legend: {position: 'none'}
 };
 var chart = new google.charts.Line(document.getElementById('number_chart'));
 chart.draw(data, options);
 }

上面的代码中有几个错误，我不确定它们是否是由于从较大的块代码剪切和粘贴造成的？

然而，除此之外，这些功能不起作用的根本原因是'line'您正在加载的包和google.charts.Line(...)您正在使用的对象正在创建 Google 所说的材质表。这是 Google Visualization API 的完全重新设计的实现，遵循 Google 的“Material Design”规范，目前仍处于测试阶段（查看详细信息here https://developers.google.com/chart/interactive/docs/gallery/linechart#creating-material-line-charts）。他们所谓的“经典”图表库中的许多功能尚未转移到“材料设计”图表中（请参阅这个 Github 问题 https://github.com/google/google-visualization-issues/issues/2143）并注意animation.* and curveType目前两者均不受支持。

无论如何，您可以通过使用较旧的（但支持更好）Google Visualization“Classic”corechart 包来解决您的问题，如下所示：

/* Load "Classic" Google Visualization API corechart package */
    google.charts.load('current', {
      'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Number'],
        ['2005', 61372],
        ['2006', 65425],
        ['2007', 71389],
        ['2008', 75173],
        ['2009', 75554],
        ['2010', 75174],
        ['2011', 74033],
        ['2012', 72225],
        ['2013', 68954],
        ['2014', 67462],
      ]);

      var options = {
        animation: {
          startup: true,   /* Need to add this for animations */
          duration: 1000,
          easing: 'out',
        },
        curveType: 'function',
        //smoothline: 'true',   /* What does this do? */
        //width: 875,    /* Better to specify size of containing DIV? */
        //height: 400,
        legend: {
          position: 'none'
        },
        vAxis:{    /* You may wish to add this to make curve animations appear from the bottom of the chart */
          baseline: 60000,
        }
      };

/* Create instance of "Classic" Visualization Line Chart  */
      var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
      chart.draw(data, options);
    }

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

希望有帮助！

Adam

编辑添加：出于某种原因，图表不喜欢在嵌入的“运行代码片段”中为我运行（我在 Win 7 上使用最新的 Chrome），但代码在其他地方应该可以正常工作。