呈现Google折线图，curveType无法设置且动画无法按预期工作

Question

我正在绘制一个谷歌折线图，它工作正常。该图表将绘制正确的数据。但是，当我更改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);
 }

Answer 1

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

但是，除此之外，这些功能不起作用的根本原因是因为'line'您正在加载的包和google.charts.Line(...)所使用的对象正在创建Google所谓的Material Chart。这是Google Visualization API的完全重新设计的实现，它遵循Google的“材料设计”规范，并且仍处于测试阶段（请参阅此处的详细信息）。他们所谓的“经典”图表库中发现的许多功能尚未转移到“材料设计”图表中（请参阅此Github问题），并注意animation.*和curveType并且目前都不受支持。

无论如何，您可以使用较旧（但受支持更好）的Google Visualization“经典” 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>

希望有帮助！

亚当

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