Question

我正在尝试使用动画创建一个列栏，但它对我不起作用。我创建了一个Plunker来演示这个问题。

我做错了什么？

您可以在此处查看我的示例代码：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="2.0.0" src="https://code.angularjs.org/2.0.0-beta.6/angular2.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script>

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      function drawChart(){
        var options = {
          width: 600,
          height: 400,
          bar: { groupWidth: "95%" },
          animation: {
              //startup: true,
              duration: 2500,
              easing: 'out',
          },
          vAxis: { title: "Espectadores", minValue: 0, maxValue: 1000 },
          hAxis: {title: "Pelicula"},
        };

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'N');
        data.addColumn('number', 'Value');
        data.addColumn('number', 'id');

        data.addRow(['El Padrino', 1000, 100]);
        data.addRow(['StarWars', 543, 100]);
        data.addRow(['Superman', 789, 100]);
        data.addRow(['Alien', 850, 100]);
        data.addRow(['El Padrino', 1000, 100]);
        data.addRow(['StarWars', 543, 100]);
        data.addRow(['Superman', 789, 100]);
        data.addRow(['Alien', 850, 100]);

        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1,
                 {
                     calc: "stringify",
                     sourceColumn: 1,
                     type: "string",
                     role: "annotation"
                 }]);

        var chart = new google.visualization.ColumnChart(document.getElementById("test"));
        chart.draw(view, options);
      }
    </script>    
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <div id = "test"></div>
</body>

</html>

Answer 1

这是'current'版本的问题。

版本'43'似乎有效。

google.charts.load('43', {'packages':['corechart']});

检查出来 - ＆gt; Go to Plunker

Google Chart Column Bar动画不起作用

1 个答案: