我正在使用“材质柱形图”创建报告,并试图在页面中渲染时具有动画效果,因此我使用了文档中给出的animation属性。我已经建立了条形图并应用了动画效果很好的动画,并为此图表使用了相同的属性,但是呈现的效果并不理想。
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
function countProperties(obj) {
var count = 0;
for(var prop in obj) {
if(obj.hasOwnProperty(prop))
++count;
}
return count;
}
var data1 = new google.visualization.DataTable();
data1.addColumn('string', 'Course Name');
data1.addColumn('number', 'Total Activities');
data1.addColumn('number', 'In progress Activities');
data1.addColumn('number', 'Completed Activities');
data1.addRows(countProperties(user_course_details));
var i=0;
for (var key in user_course_details) {
if (user_course_details.hasOwnProperty(key)) {
var val = user_course_details[key];
data1.setCell(i,0,val.fullname);
data1.setCell(i,1,val.activitiescount);
data1.setCell(i,2,val.activitiescount - val.activitiescompletedcount);
data1.setCell(i,3,val.activitiescompletedcount);
i++;
}
}
var options = {
animation:{
duration: 1000,
easing: 'in',
startup: true
},
chart: {
title: 'Activities Overview',
},
bar: {groupWidth: "25%"},
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data1, google.charts.Bar.convertOptions(options));
}
在上面的代码中,我希望柱形图可以通过动画呈现,因此我在图表选项中添加了animation属性,但是它的行为不符合预期。提前致谢。如果我错过了任何内容,请指导我,我正在尝试熟悉Google Visualization API。