我尝试多次为我的谷歌折线图设置动画,但我的图表拒绝多次转换。在下面的示例中,它将显示第一个数据集并向右过渡到第四个数据集,跳过中间的两个数据集。我该如何解决此问题?
<script type="text/javascript">
var options;
var chart;
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(prep);
function prep(){
chart = new google.visualization.LineChart(document.getElementById('chart'));
options = {
colors: ['Red','Purple','Blue'],
animation:{duration: 1000,easing: 'linear'}
};
drawChart();
}
function triggerChart(data){
chart.draw(data, options);
}
function drawChart(){
data = google.visualization.arrayToDataTable([
['Hour', 'First', 'Second', 'Third'],
[1,1,2,3],
[2,2,3,4]
]);
triggerChart(data);
data = google.visualization.arrayToDataTable([
['Hour', 'First', 'Second', 'Third'],
[3,2,3,4],
[4,5,6,7]
]);
setTimeout(function(){triggerChart(data);},2000);
data = google.visualization.arrayToDataTable([
['Hour', 'First', 'Second', 'Third'],
[5,5,6,7],
[6,7,8,9]
]);
setTimeout(function(){triggerChart(data);},4000);
data = google.visualization.arrayToDataTable([
['Hour', 'First', 'Second', 'Third'],
[7,11,12,13],
[8,12,13,14]
]);
setTimeout(function(){triggerChart(data);},6000);
}
</script>
<div id="chart" style="width:900px;height:600px"></div>
最佳答案
函数 triggerChart()
总是使用相同的数据集调用,并且它是最后一个。
您必须将 data
的分配移至 setTimeout
调用。
更新:此行为的原因:data
是全局变量,执行顺序为:
- 第一个
数据
赋值 - 调用
triggerChart(data)
- 第二个
数据
分配 - 第三个
数据
赋值 - 第四个
数据
赋值 - 调用
triggerChart(data)
- 调用
triggerChart(data)
- 调用
triggerChart(data)
另一个解决方案是将 data
排除在 setTimeout()
之外,但在这种情况下,您必须使用 4 个不同的数据变量名称。例如 data1
、data2
、data3
和 data4
。
关于javascript - 多次动画 Google 图表转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23525639/