javascript 图表首次加载时的 Google 可视化动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9714254/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Visualization Animation when chart loads for the first time
提问by Tristan Jade Awat
I would like to know if I can apply an animation to the charts on the first time it draws?
我想知道我是否可以在第一次绘制图表时将动画应用于图表？
And not only when a change of data happens?
不仅是在数据发生变化时？
THanks!
谢谢！
采纳答案by Guy
The Chart should be rendered before you can apply your animation which is showing transitionfrom one state to another. You can either change the dataor change the chart optionsto create the transition and its animation.
在应用显示从一种状态到另一种状态的转换的动画之前，应先渲染图表。您可以更改数据或更改图表选项以创建过渡及其动画。
To be able to show animation on the first time, you can simply create an empty (no data) chart, and then add your data to the chart, to show the data animation.
为了能够在第一时间显示动画，您可以简单地创建一个空的（无数据）图表，然后将您的数据添加到图表中，以显示数据动画。
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]);
回答by laaposto
UPDATED ANSWER
更新的答案
Google has updated chart options and added the option to animate the chart on the first time it draws.
Google 更新了图表选项，并添加了在首次绘制图表时为其设置动画的选项。
So the only thing you have to do is psecify it in the options like that:
因此，您唯一要做的就是在如下选项中对其进行配置：
var options = {
animation: {
duration: 1500,
startup: true //This is the new option
}
};
So you dont have to load an empty chart on the beggining or to do any other hack.
因此，您不必在开始时加载空图表或进行任何其他黑客攻击。
回答by s0vet
Try something like this http://jsfiddle.net/h7mSQ/163/. The way to do this is to render chart with zero values and then set values as required and draw chart again. Don't forget to set minimal and maximal value for (in this example) vertical axis.
试试这样的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);
