用Google Visualization制作饼图动画
用Google Visualization制作饼图动画
提问于 2013-06-22 01:47:04
我正在尝试使用谷歌图表。我想要一个饼图动画从0%到75% (见下图)。我正试图通过谷歌图表来实现这一点。我正在创建两组数据，一组从99%开始，另一组从1%开始。我想反转和动画这些。我已经实现了通过动画来改变这些值，但是我不知道如何让它们变成动画。
<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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-06-27 01:08:28
我相信Google Charts api不支持该功能-请参阅Supported Modifications
我认为如果您使用不同的图表工具，比如这个http://bl.ocks.org/mbostock/1346410，可能会更容易一些
Stack Overflow用户
发布于 2016-11-03 23:30:54
使用整洁的@Muhammad动画循环解决原始问题。
初始值：
- Work: 0%
- Eat: 100%
循环将值增加1个单位，并每30毫秒绘制一次饼图。
当达到Work=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);
}<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
Stack Overflow用户
发布于 2015-10-06 15:13:07
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<script>
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
var counter = 0;
var handler = setInterval(function(){
counter = counter + 0.1
options = {
title: 'My Daily Activities',
slices: { 1: {offset: counter},
3: {offset: counter},
5: {offset: counter},
}
};
chart.draw(data, options);
if (counter > 0.3) clearInterval(handler);
}, 200);
}
</script>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17241338
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号