Question

我正在创建一个折线图，其中有一些线条会随着用户交互而显示和消失。有没有办法动画添加的数据，如图表启动动画？或者淡入淡出，这样它就不会那么突然？

我有一个想法是将新数据设置为0，然后让它对新数据进行动画处理，但是想知道是否有其他方法。

希望有意义

Answer 1

从一个数据集动画到另一个数据集，使用新数据重绘相同的图表。

请参阅以下内容，工作代码段。在重绘之前，每列中的数据都被“交换”......

for elt in mylist:
    output.write(elt + "\n")

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([["PR","CE","PE"],["5500",1875,2025],["6000",61500,104775],["6100",450,13725],["6500",35400,421800],["6600",150,121950],["6700",600,770925],["6800",13650,370425],["6900",33375,586650],["7000",744375,1122075],["7100",229200,355875],["7200",199800,689850],["7300",461550,244425],["7400",442950,439125],["7500",835350,484725],["7600",459000,82800],["7700",482250,48000],["7800",893250,11550],["7900",1215600,13500],["8000",741150,93525],["8100",242325,6150],["8200",326175,1500],["8300",365850,75],["8500",104850,2925],["9000",13050,11775]]);

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

    var options = {
      animation: {
        startup: true,
        duration: 2000,
        easing: 'linear'
      }
    };

    var redrawTimes = 0;
    google.visualization.events.addListener(chart,'animationfinish',function () {
      for (var i = 0; i < data.getNumberOfRows(); i++) {
        var swap1 = data.getValue(i, 2);
        var swap2 = data.getValue(i, 1);
        data.setValue(i, 1, swap1);
        data.setValue(i, 2, swap2);
      }
      if (redrawTimes < 5) {
        setTimeout(function () {
          chart.draw(data, options);
          redrawTimes++;
        }, 2000);
      }
    });

    chart.draw(data, options);
  },
  packages: ['corechart']
});

Answer 2

只需使用包含动画设置的DataTable，再次向您的.draw()和电话options添加数据。

选项可能看起来像

var options = {
  animation: {
    duration: 600
  }
};

然后只需致电chart.draw(DataTable, options)即可为其设置动画。

参见示例live at codepen。只需使用按钮添加数据，它就可以顺利添加到该行中。

动画Google折线图中的新数据

2 个答案: