Question

我正在绘制一个谷歌折线图，它工作正常。该图表使用正确的数据绘制。但是当我更改curveType的选项时，'function'选项不会将图表从直线更改为曲线。此外，动画功能根本不做任何事情。我在这里错过了什么吗？这是我的代码：

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所称的< em>物料图表。这是一个完全重新设计的Google Visualization API实施，遵循Google的“Material Design”规范，目前仍处于测试阶段（详见here）。他们称之为“经典”图表库的许多功能尚未转移到“材料设计”图表（请参阅this Github issue）并注意animation.*和curveType目前都不受支持。

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

/* 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），但代码在其他地方应该可以正常运行。

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

1 个答案: