javascript - 多次动画 Google 图表转换

Question

我尝试多次为我的谷歌折线图设置动画，但我的图表拒绝多次转换。在下面的示例中，它将显示第一个数据集并向右过渡到第四个数据集，跳过中间的两个数据集。我该如何解决此问题？

    <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>

Answer 1

函数 triggerChart() 总是使用相同的数据集调用，并且它是最后一个。

您必须将 data 的分配移至 setTimeout 调用。

更新:此行为的原因:data 是全局变量，执行顺序为:

• 第一个数据赋值
• 调用triggerChart(data)
• 第二个数据分配
• 第三个数据赋值
• 第四个数据赋值
• 调用triggerChart(data)
• 调用triggerChart(data)
• 调用triggerChart(data)

另一个解决方案是将 data 排除在 setTimeout() 之外，但在这种情况下，您必须使用 4 个不同的数据变量名称。例如 data1、data2、data3 和 data4。