Javascript 在Google折线图中设置新数据的动画

我正在制作一个折线图，它会随着用户的交互而出现和消失。有没有一种方法可以像图表启动动画那样为添加的数据设置动画？或者淡入淡出线条，这样就不会太突然了

我的一个想法是将新数据设置为0，然后将其设置为新数据的动画，但我想知道是否还有其他方法

---

希望这是有意义的

从一个数据集到另一个数据集，用新数据重新绘制同一图表

请参阅下面的工作代码段。在重画之前，每列中的数据都被“交换”

google.charts.load（'current'{
回调：函数（）{
var data=google.visualization.arrayToDataTable（[“PR”，“CE”，“PE”]，[“5500”，18752025]，“6000”，61500104775]，“6100”，45013725]，“6500”，35400421800]，“6600”，150121950]，“6700”，600770925]，“6800”，13650370425]，“6900”，33375586650]，“7000”，7443751122075]，“7100”，22920355875]，“7200”，199800689850]，“7300”，461550244425]，“4429504125]，“79125]，["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'））；
变量选项={
动画：{
是的，
期限：2000年，
放松：“线性”
}
};
var重绘次数=0；
google.visualization.events.addListener（图表，'animationfinish'，函数（）{
对于（var i=0；i

---

要从一个数据集到另一个数据集设置动画，请使用新数据重新绘制同一图表

请参阅下面的工作代码段。在重画之前，每列中的数据都已“交换”

google.charts.load（'current'{
回调：函数（）{
var data=google.visualization.arrayToDataTable（[“PR”，“CE”，“PE”]，[“5500”，18752025]，“6000”，61500104775]，“6100”，45013725]，“6500”，35400421800]，“6600”，150121950]，“6700”，600770925]，“6800”，13650370425]，“6900”，33375586650]，“7000”，7443751122075]，“7100”，22920355875]，“7200”，199800689850]，“7300”，461550244425]，“4429504125]，“79125]，["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'））；
变量选项={
动画：{
是的，
期限：2000年，
放松：“线性”
}
};
var重绘次数=0；
google.visualization.events.addListener（图表，'animationfinish'，函数（）{
对于（var i=0；i

---

只需使用包含动画设置的

选项将数据添加到
数据表和图表上的调用
.draw（）

选项可能看起来像

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

然后只需调用
chart.draw（DataTable，options）
即可为其设置动画

请参阅示例直播。只需使用按钮添加数据，数据就会顺利添加到行中。
只需使用包含动画设置的
选项将数据添加到图表上的
数据表和调用
.draw（）

选项可能看起来像

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

然后只需调用
chart.draw（DataTable，options）
即可为其设置动画

请参阅示例live。只需使用按钮添加数据，数据就会顺利添加到行中