我试图多次动画我的谷歌线图表,但我的图表拒绝转换不止一次。在下面的示例中,它将显示第一个数据集并直接转换到第四个数据集,在中间跳过这两个数据集。我怎么才能纠正这种行为?
<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>发布于 2014-05-07 18:56:09
函数triggerChart()总是使用相同的数据集调用,这是最后一个数据集。
您必须将data的分配转移到setTimeout调用。
更新:此行为的原因:data是全局变量,而执行顺序是:
data分配triggerChart(data)调用data分配data分配data分配triggerChart(data)调用triggerChart(data)调用triggerChart(data)调用另一种解决方案是将data排除在setTimeout()之外,但在这种情况下,您必须为数据使用4个不同的变量名。例如,data1、data2、data3和data4。
https://stackoverflow.com/questions/23525639
复制相似问题