Question

我正在尝试在谷歌图表中制作动画。由于某些原因，动画不会触发。

它非常简单的代码。我将不胜感激任何帮助。

      google.setOnLoadCallback(drawChart);
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);
      function drawChart() {



        var options = {
      width: 400,
      height: 240,
      animation:{
        'duration': 5000,
        'easing': 'out',
      },
      vAxis: {minValue:0, maxValue:100}
    };
        var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }

var ch=0;
    function change(){
        if(ch==0){
                  data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     1],
          ['Eat',      20],
          ['Commute',  20],
          ['Watch TV', 20],
          ['Sleep',    17]
        ]);
            ch=1;
        }
        else if(ch==1){
            data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     10],
          ['Eat',      2],
          ['Commute',  12],
          ['Watch TV', 24],
          ['Sleep',    47]
        ]);
            ch=0;
        }
        drawChart();
    }

完整代码位于JSFIddle

下方

https://jsfiddle.net/hjnufh0o/

Answer 1

每次调用drawChart()时都会重新创建图表对象，这会破坏现有图表并构建新图表 - 因此没有任何动画可用。

https://jsfiddle.net/2foeopyv/

我已从chart部分提取options和drawChart()的声明，因此它现在更新图表而不是尝试重新创建它。

谷歌图表动画不起作用

1 个答案: