使用Google Visualization制作饼图动画 [英] Animating pie chart with Google Visualization
问题描述
我正在尝试使用Google图表.我希望饼图从0％到75％进行动画处理(请参见下图).我正在尝试通过Google图表实现这一目标.我正在创建两套数据，一组将从99％开始，另一组将从1％开始.我想对它们进行反转和动画处理.我已经通过动画更改了值，但是无法弄清楚如何使它们动画.
I am experimenting with google charts. I want a pie chart to animate from 0% to 75% (see the image below). I am attempting to achieve this through google charts. I am creating two sets of data, one will start at 99%, the other at 1%. I want to invert and animate these. I have achieved changing the values through animation, but cannot figure out how to get them to animate.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
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; i<100; i++) {
data.setValue(0, 1, i);
}
for (var i=99; i>00; i--) {
data.setValue(1, 1, i);
}
setTimeout(function(){
chart.draw(data, options);
}, 1000);
};
aniChart();
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
推荐答案
我认为Google Charts api不支持该功能-请参阅
I believe that function is not supported by Google Charts api - refer to Supported Modifications
我认为，如果您使用其他图表工具(例如 http://bl)，可能会更容易. ocks.org/mbostock/1346410
I think it may be easier if you use a different chart tool such as this http://bl.ocks.org/mbostock/1346410
这篇关于使用Google Visualization制作饼图动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
