Question

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

不仅在发生数据更改时？

谢谢！

Answer 1

更新的答案

Google已更新图表选项，并添加了第一次绘制图表动画的选项。

所以你唯一需要做的就是在这样的选项中加强它：

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

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

3 个答案: