Google Charts启动动画无法正常工作 [英] Google charts startup animation isn't working
本文介绍了Google Charts启动动画无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在启动时为Google条形图制作动画.图表出现，但没有动画.我想使图表的条形图从零增长到最终值.我将animation.startup设置为true，但仍不会设置动画.我做错了什么?
I'm trying to animate a google bar chart on startup. The chart appears, but doesn't animate. I want to make the bars of the chart grow from zero to their final values. I set animation.startup to true, but it still won't animate. What an I doing wrong?
eh.html:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="eh.js"></script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
eh.js:
google.charts.load('current', {
packages: ['bar'], callback: drawChart
});
function drawChart() {
var choices = ["Banana", "Apple", "Orange"];
var votes = [1, 2, 3];
var name = "Favorite fruit";
var dataArray = [
['Choice', 'Votes']
];
for (var i = 0; i < choices.length; i++) {
dataArray.push([choices[i], votes[i]]);
}
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
animation:{
duration: 1000,
easing: 'linear',
startup: true
},
vAxis: {minValue:0, maxValue:100000000},
title: "votes",
legend: { position: 'none' },
chart: { title: name,
subtitle: 'popularity by Votes' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Votes'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, options);
}
="
动画
您可以使用选项 theme:"material" 以获得外观和感觉
you can use option theme: 'material' to get the look and feel close
但是'corechart'
请参阅以下工作摘要...
see following working snippet...
google.charts.load('current', {
callback: function () {
var choices = ["Banana", "Apple", "Orange"];
var votes = [1, 2, 3];
var name = "Favorite fruit";
var dataArray = [
['Choice', 'Votes']
];
for (var i = 0; i < choices.length; i++) {
dataArray.push([choices[i], votes[i]]);
}
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
animation:{
duration: 1000,
easing: 'linear',
startup: true
},
vAxis: {minValue:0, maxValue:100000000},
title: "votes",
legend: { position: 'none' },
title: name + '\n' + 'popularity by Votes',
theme: 'material',
bar: { groupWidth: "90%" }
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages: ['corechart']
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>这篇关于Google Charts启动动画无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
