切片颜色的谷歌饼图动画
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了切片颜色的谷歌饼图动画相关的知识,希望对你有一定的参考价值。
我有一个谷歌饼图,我试图使用简单的javascript代码动画。
我希望改变我的馅饼切片的颜色。为什么我的代码不起作用?
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['A1', 0],
['Failed',1],
['A2', 0],
['Passed', 3],
]);
var colors1 = ['#ef7777', '#ef7777', '#b2d284', '#b2d284', '#f6c7b6'];
var colors2 = ['#ff00ff', '#ff00ff', '#02d2ff', '#02d2ff', '#f6c7b6'];
var colors3 = colors2;
var options1 = {'title':'Logic', 'width':'50%', 'height':'50%', legend:{position:'none'}, 'is3D':true,
chartArea: {width: '70%', height: '70%'},
colors: colors3,
'backgroundColor': '#fef7f8',
pieSliceTextStyle: {
color: '#000000',
bold: true,
fontSize:16
}
};
var chart1 = new google.visualization.PieChart(document.getElementById('piechart1'));
chart1.draw(data1, options1);
var percent = 0;
var handler = setInterval(function(){
// values increment
percent += 1;
if (percent%2 == 1) {
colors3 = colors1;
}
else
{
colors3 = colors2;
}
chart1.draw(data1, options1);
if (percent > 74)
clearInterval(handler);
}, 333);
}
所以,我在这里设置了2个带有颜色集的数组,用于我的饼图。第一种颜色为红色和绿色,第二种颜色为蓝色和紫色。
我希望使用“setInterval”函数连续切换这些颜色集。
答案
colors是您的选项对象的关键。 setInterval调用的回调函数会更改名为colors3的变量,但不会将其分配给原始对象,因此不会使用它。
if (percent % 2 == 1) {
colors3 = colors1;
} else {
colors3 = colors2;
}
options1.colors = colors3; // here we're assigning it!
chart1.draw(data1, options1);
以上是关于切片颜色的谷歌饼图动画的主要内容,如果未能解决你的问题,请参考以下文章