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是全局变量，执行顺序为：

首次data作业
致电triggerChart(data)
第二次data作业
第三次data作业
第四次data作业
致电triggerChart(data)
致电triggerChart(data)
致电triggerChart(data)

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

多次动画Google图表转换

1 个答案: