首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >动画谷歌图表转换多次

动画谷歌图表转换多次
EN

Stack Overflow用户
提问于 2014-05-07 18:33:58
回答 1查看 346关注 0票数 0

我试图多次动画我的谷歌线图表,但我的图表拒绝转换不止一次。在下面的示例中,它将显示第一个数据集并直接转换到第四个数据集,在中间跳过这两个数据集。我怎么才能纠正这种行为?

代码语言:javascript
运行
复制
    <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>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 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个不同的变量名。例如,data1data2data3data4

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23525639

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档