如何为Google图表制作动画？

在脚本标记中，我添加了下面的代码，我无法对其进行动画处理。善举如何为Google图表制作动画？

google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Sales', 'Expenses'], 
     ['2004', 1000,  400], 
     ['2005', 1170,  460], 
     ['2006', 660,  1120], 
     ['2007', 1030,  540] 
    ]); 

    var options = { 
     title: 'Company Performance', 
     animation: { 
      duration: 1000, 
      easing: 'out' 
     }, 
     vAxis: {title: 'Year', titleTextStyle: {color: 'red'}, minValue:0, maxValue:1000} 
    }; 
    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    }

图表正在加载，但我无法为它制作动画。在加载时进行动画制作

来源

2014-02-05 user1941043

当您更改数据中的某些内容时，您将看到动画。更改您的代码是这样的：

... 
    chart.draw(data, options); 

    setTimeout(function() { 
     data.setValue(0, 2, 1000); 
     chart.draw(data, options); 
    }, 3000);

和费用价值400将被更改为1000动画。

查看此文档about animation的一些提示。

更新：似乎没有对负载没有动画，但你可以假像这样加载全零的beggining，然后用真实的数据重新划分：

var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Sales', 'Expenses'], 
    ['2004', 0,  0], 
    ['2005', 0,  0], 
    ['2006', 0,  0], 
    ['2007', 0,  0] 
]); 

var options = { 
    title: 'Company Performance', 
    animation: { 
     duration: 1000, 
     easing: 'out' 
    }, 
    vAxis: {title: 'Year', titleTextStyle: {color: 'red'}, minValue:0, maxValue:1000} 
}; 
var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
chart.draw(data, options); 

var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Sales', 'Expenses'], 
    ['2004', 1000,  400], 
    ['2005', 1170,  460], 
    ['2006', 660,  1120], 
    ['2007', 1030,  540] 
]); 
chart.draw(data, options);

来源

2014-02-05 13:11:23

没有我的意思加载 – user1941043

页面请检查所支持的修改（HTTPS的时间制作动画：//开发商。 google.com/chart/interactive/docs/animation#Supported_Modifications）。似乎没有动画加载 –

@ user1941043：解决方法更新与解决方法 –

要动态负载，加startup: true添加到您的动画选项（参见documentation）。全码：

  animation: { 
      duration: 1000, 
      easing: 'out', 
      startup: true 
     }

来源

2015-05-12 13:53:45 speedracr

我知道这是旧的，但是，这对我很好，它似乎是正式的方式来做到这一点。 – Feign

使用本

var options = 
{ 
    title: 'Total Sale Today', 
    animation: 
      { 
       "startup": true, 
       duration: 2000, 
       easing: 'out' 
      } 
}

来源

2016-06-09 13:46:04

你能否详细说明一下？ – Kmeixner

var data = google.visualization.arrayToDataTable(chartArr); 

var options = { 
    sliceVisibilityThreshold: .0, 
    pieHole: 0.3, 
    legend: 'none', 
    pieSliceText: 'label', 
    height:500, 
    width : "100%", 
    is3D: true, 
    animation:{ 
    duration: 5000, 
    easing: 'out', 
    startup: true //This is the new option 
    }, 
}; 

var chart = new google.visualization.PieChart(document.getElementById('ethnicityChartInq')); 

chart.draw(data, options); 

// initial value 
var percent = 0; 
// start the animation loop 
var handler = setInterval(function(){ 
    // values increment 
    percent += 1; 
    // apply new values 
    data.setValue(0, 1, percent); 
    data.setValue(1, 1, 100 - percent); 

    // update the pie 
    chart.draw(data, options); 
    // check if we have reached the desired value 
    if (percent > 74) 
     // stop the loop 
     clearInterval(handler); 
}, 30);

来源

2017-06-09 05:22:51

如何为Google图表制作动画？

回答

相关问题