Question

我正在使用Google Charts。它有一个动画功能，但这个不适合我。文档说你必须添加这样的东西：

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

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

我做了一个你可以在这里找到的codepen： 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

包裹＆＃39;＆＃39;不支持动画。您必须将非材质核心图表用于动画，例如核心图表＆＃39;你已经有了。

而不是＆＃39; bar＆＃39;仅使用核心图表

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

而不是bar.chart使用visualization.ColumnChart

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

不再需要转换，所以请使用此

chart.draw(view, options);

Codepen：http://codepen.io/anon/pen/dMxVNY

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

1 个答案: