javascript - Rendering a google line chart, curveType not setting and animation not working as expected - Stack Overflow

admin管理员组

文章数量:1414628

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

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

• javascript
• google-visualization

Share Improve this question Follow asked Aug 29, 2016 at 19:17 CEamonnCEamonn 93522 gold badges1818 silver badges4545 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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 pletely 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./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.

本文标签：