如何使用Google圖表製作柱狀圖啓動動畫？

Question

我在使用Google圖表。它有一個動畫功能，但這個不適合我。該文件說，你必須添加這樣的東西：

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

谷歌有示例代碼，但不適合我。 我想要做的兩件事情：

• 變焦值與像本例中的動畫： https://developers.google.com/chart/interactive/docs/animation#adding-and-removing-columns

Answer 1

包「酒吧」的作用：像這樣的例子列https://developers.google.com/chart/interactive/docs/animation#changing-the-view-window

變更號碼不支持動畫。您必須將非材質核心圖用於動畫，例如已有的'corechart'。

而不是 '酒吧' 使用「corechart只有

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