javascript - 如何使用 Google Charts 制作柱形图开始动画？

Question

我正在使用 Google 图表。它有一个动画功能，但这个对我不起作用。文档说你必须添加如下内容:

    animation: {
       startup:true,
       duration: 2000,
       easing: 'in',
    },

您的选择。但这对我不起作用，我不明白为什么。

我制作了一个代码笔，您可以在这里找到: http://codepen.io/anon/pen/ZWNrOg

HTML:

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

<div id="columnchart"></div>
<button type="button" onclick="drawChartColumn('zoom')">Zoom</button>
<button type="button" onclick="drawChartColumn('column1')">Column1</button>
<button type="button" onclick="drawChartColumn('column2')">Column2</button>

CSS

#columnchart {
  height: 300px;
  width: 500px;
}

Javascript

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

function drawChart(category) {
  drawChartColumn();
}

function drawChartColumn(category) {

  var data = google.visualization.arrayToDataTable([
    ['Jaar', 'Nummer1', 'Nummer2'],
    ['2015', 238000000, 9400000000],
    ['2016', 275000000, 9700000000],
    ['2017', 339000000, 9900000000],
    ['2018', 369000000, 10100000000],
    ['2019', 3690000, 101000000],
  ]);


  if(category == 'zoom'){
    var options = {
          isStacked: true,
        animation: {
           startup:true,
           duration: 2000,
           easing: 'in',
        },
        hAxis: {viewWindow: {min:3, max:4}},
        vAxis: {viewWindow: {min:0, max:3000000}}
    };
  }
  else {
    var options = {
          isStacked: true,
        animation: {
           startup:true,
           duration: 2000,
           easing: 'in',
        },
        hAxis: {viewWindow: {min:0, max:5}}
    };
  }

  var chart = new google.charts.Bar(document.getElementById('columnchart'));


  var view = new google.visualization.DataView(data);
  var viewColumns = [0];

     switch (category) {
        case 'column2':
          viewColumns.push(1);
          viewColumns.push(2);
          break;

         case 'column1':
          viewColumns.push(1);
          break;

        default:
          viewColumns.push(1);
      }

  view.setColumns(viewColumns);
  chart.draw(view, google.charts.Bar.convertOptions(options));
}

Google 有示例代码，但对我来说不起作用。 我想做两件事:

• 缩放到带有动画的值，如下例所示:https://developers.google.com/chart/interactive/docs/animation#changing-the-view-window
• 更改列数，如下例所示: https://developers.google.com/chart/interactive/docs/animation#adding-and-removing-columns

Answer 1

包“bar”不支持动画。您必须使用非 Material corecharts 进行动画，例如您已有的“corechart”。

仅使用“corechart”代替“bar”

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

使用 Visualization.ColumnChart 代替 bar.chart

var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));

不再需要转换，所以使用这个

chart.draw(view, options);

代码笔:http://codepen.io/anon/pen/dMxVNY