我有一个 Google 饼图,我尝试使用简单的 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”在这些颜色集之间连续切换。
最佳答案
颜色是选项对象的键。 setInterval 调用的回调函数会更改名为 color3 的变量,但您不会将其分配给原始对象,因此永远不会使用它。
if (percent % 2 == 1) {
colors3 = colors1;
} else {
colors3 = colors2;
}
options1.colors = colors3; // here we're assigning it!
chart1.draw(data1, options1);
关于javascript - 切片颜色的谷歌饼图动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55890258/