Google charts startup animation isn't working

问题

I'm trying to animate a google bar chart on startup. The chart appears, but doesn't animate. I want to make the bars of the chart grow from zero to their final values. I set animation.startup to true, but it still won't animate. What an I doing wrong?

eh.html:

<html>
  <head>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script type="text/javascript" src="eh.js"></script>

    </head>
    <body>
        <div id="chart_div"></div>
</body>
</html>

eh.js:

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


function drawChart() {
  var choices = ["Banana", "Apple", "Orange"];
  var votes = [1, 2, 3];
  var name = "Favorite fruit";
  var dataArray = [
      ['Choice', 'Votes']
  ];

  for (var i = 0; i < choices.length; i++) {
      dataArray.push([choices[i], votes[i]]);
  }
  var data = google.visualization.arrayToDataTable(dataArray);

  var options = {
    animation:{
        duration: 1000,
        easing: 'linear',
        startup: true
    },
    vAxis: {minValue:0, maxValue:100000000},
    title: "votes",
    legend: { position: 'none' },
    chart: { title: name,
             subtitle: 'popularity by Votes' },
    bars: 'horizontal', // Required for Material Bar Charts.
    axes: {
      x: {
        0: { side: 'top', label: 'Votes'} // Top x-axis.
      }
    },
    bar: { groupWidth: "90%" }
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, options);
}

回答1:

animation isn't supported on Material charts

see Valid Chart Types under Supported Modifications

you can use option theme: 'material' to get the look and feel close

but top x-axis isn't supported in 'corechart'

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var choices = ["Banana", "Apple", "Orange"];
    var votes = [1, 2, 3];
    var name = "Favorite fruit";
    var dataArray = [
        ['Choice', 'Votes']
    ];

    for (var i = 0; i < choices.length; i++) {
        dataArray.push([choices[i], votes[i]]);
    }
    var data = google.visualization.arrayToDataTable(dataArray);

    var options = {
      animation:{
          duration: 1000,
          easing: 'linear',
          startup: true
      },
      vAxis: {minValue:0, maxValue:100000000},
      title: "votes",
      legend: { position: 'none' },
      title: name + '\n' + 'popularity by Votes',
      theme: 'material',
      bar: { groupWidth: "90%" }
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

回答2:

If you want other choice. maybe you can use Chart.js It's easy to learn whit many example and popular.

Hope this can help you because I'm new. Chart.js Documentation

来源：https://stackoverflow.com/questions/38579500/google-charts-startup-animation-isnt-working

标签

javascript

google-visualization