Rendering a google line chart, curveType not setting and animation not working as expected

问题

I'm drawing a google line chart and it works fine. The chart draws with the correct data. However when I go change the options of curveType, the 'function' option does not change the chart from straight line to curves. Also, the animation functions do nothing at all. Am I missing something here? This is my code:

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);
 }

回答1:

You have a couple of errors in your code above, I'm not sure if they are due to cutting-and-pasting from a larger block code?

However, aside from that, the fundamental reason that these features are not working is because the 'line' package that you are loading and the google.charts.Line(...) object that you are using are creating what Google calls a Material Chart. This is a completely redesigned implementation of the Google Visualization API adhering to Google's "Material Design" specification and is still currently in beta (see details here). A lot of the features found in what they call the "Classic" chart library have not yet been carried over to the "Material Design" charts (see this Github issue) and note animation.* and curveType are both currently unsupported.

Anyway, you can solve your issues by using the older (but much better supported) Google Visualization "Classic" corechart package as follows:

/* 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>

Hope that helps!

Adam

Edited to add: For some reason the charts don't like running for me in the embedded "Run Code Snippet" thing (I'm using the latest Chrome on Win 7) but the code should work fine elsewhere.

来源：https://stackoverflow.com/questions/39213575/rendering-a-google-line-chart-curvetype-not-setting-and-animation-not-working-a

标签

javascript

google-visualization