使用Google Visualization动画饼图

我正在尝试使用谷歌图表。 我想要一个饼图从0％到75％的动画（见下图）。 我试图通过谷歌图表实现这一目标。 我正在创建两组数据，一组将以99％开始，另一组以1％开始。 我想反转和动画这些。 我已经通过动画实现了更改值，但无法弄清楚如何让它们进行动画制作。

    google.load('visualization', '1.0', {'packages':['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'text'); data.addColumn('number', 'number'); data.addRows(2); data.setValue(0, 0, 'Work'); data.setValue(0, 1, 1); data.setValue(1, 0, 'Eat'); data.setValue(1, 1, 99); var options = { width:500, height:500, animation: {duration: 1000, easing: 'out',} }; var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); function aniChart(d,o){ for (var i=1; i00; i--) { data.setValue(1, 1, i); } setTimeout(function(){ chart.draw(data, options); }, 1000); }; aniChart(); }    
   

Answer 1

我相信Google Charts api不支持该function – 请参阅支持的修改

我认为如果您使用不同的图表工具可能会更容易，例如http://bl.ocks.org/mbostock/1346410

Answer 2

Answer 3

用整洁的@Muhammad动画循环解决原始问题。

初始值：

• 工作：0％
• 吃：100％

循环增加值1单位并每30毫秒绘制一个饼图。

当达到工作= 75％时，循环停止。

 google.load('visualization', '1.0', {'packages':['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'text'); data.addColumn('number', 'number'); data.addRows(2); data.setValue(0, 0, 'Work'); data.setValue(0, 1, 0.0); data.setValue(1, 0, 'Eat'); data.setValue(1, 1, 100.0); var options = { width:500, height:500 }; var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 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); }