第一次加载图表时的Google Visualization Animation

Question

我想知道我是否可以在第一次绘制时将动画应用到图表中？

而且不仅在发生数据更改时？

谢谢!

Answer 1

更新的答案

Google已更新图表选项,并添加了在第一次绘制图表时为其设置动画的选项.

所以你唯一需要做的就是在这样的选项中进行psecify:

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

因此,您不必在开始时加载空图表或进行任何其他黑客攻击.

DEMO

Answer 2

图表应该被渲染,然后才能应用你的动画,其显示的过渡,从一个状态到另一个状态.您可以更改数据或更改图表选项以创建过渡及其动画.

为了能够在第一时间显示动画,您只需创建一个空(无数据)图表,然后将数据添加到图表中,以显示数据动画.

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 3

试试这样的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);