谷歌可視化動畫當圖表加載第一次

Question

我想知道如果我可以應用動畫的第一次繪製圖表？

不僅當數據發生變化時，

謝謝！

Answer 1

該圖表應先呈現，然後才能將您的動畫顯示爲轉換從一個狀態到另一個狀態。您可以更改數據或更改圖表選項以創建轉場及其動畫。

爲了能夠在上首次顯示動畫，您可以簡單地創建一個空的（無數據）圖表，然後將數據添加到圖表中，以顯示數據動畫。

var options = { 
    animation:{ 
    duration: 1000, 
    easing: 'out', 
    } 
}; 
var data = new google.visualization.DataTable(); 
data.addColumn('string', 'N'); 
data.addColumn('number', 'Value'); 
var chart = new google.visualization.ColumnChart... 
chart.draw(data, options); 
// Adding data 
data.addRow(['V', 200]); 

Answer 2

嘗試類似這樣的http://jsfiddle.net/h7mSQ/163/。執行此操作的方法是使用零值呈現圖表，然後根據需要設置值並再次繪製圖表。不要忘記爲（在本例中）垂直軸設置最小值和最大值。

function drawChart() { 
    var option = {title:"Yearly Coffee Consumption in our company", 
       width:600, height:400, 
       animation: {duration: 1000, easing: 'out',}, 
       vAxis: {title: "Cups of coffee", minValue:0, maxValue:500}, 
       hAxis: {title: "Year"}}; 
    var data = new google.visualization.DataTable();  
    data.addColumn('string', 'N'); 
    data.addColumn('number', 'Value'); 
    data.addRow(['2003', 0]); 
    data.addRow(['2004', 0]); 
    data.addRow(['2005', 0]); 
    // Create and draw the visualization. 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart')); 
    chart.draw(data, option); 
    data.setValue(0, 1, 400); 
    data.setValue(1, 1, 300); 
    data.setValue(2, 1, 400); 
    chart.draw(data, option); 

} 

google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart); 

Answer 3

修訂ANSWER

谷歌已經更新圖表選項，並添加到動畫的第一次繪製圖表的選項。

所以，你必須做的唯一事情是psecify它在那樣的選項：

var options = { 
      animation: { 
       duration: 1500, 
       startup: true //This is the new option 
      } 
     }; 

所以你不要有加載在beggining空圖表或做任何其他黑客。

DEMO