javascript - 使用 Highcharts 动态加载新数据的动画

Question

我必须在折线图上的两个数据集之间切换，请参阅 this fiddle 。一个具有线性 x 轴，另一个具有对数 x 轴。更新数据是没有问题的:

chart.series[0].setData( data2, false);
chart.xAxis[0].update({type: "logarithmic"}, false);
chart.redraw();

问题在于数据之间的转换没有动画。从数据集 1 到数据集 2，情节跳跃，但奇怪的是，数据以相反的顺序显示，首先是数据集 2，然后是数据集 1，是动画。 p>

引用文献here ，他们提到了 setData() 的第三个参数，用于在设置不同长度的新数据时进行动画处理，但将其设置为 true 或 {duration: x} 不起作用。

编辑:

感谢您到目前为止的回复，但显然我解释得不够清楚，但要明白我的意思，您应该仔细查看我链接到的 fiddle 中的动画。比较单击数据集 2 时的动画(过渡不是动画)，然后单击另一个按钮返回到初始数据集(您将看到动画过渡)。 如果 Highcharts 可以设置从第 2 组到第 1 组的过渡动画，为什么它不能使用相同的代码反向显示从第 1 组到第 2 组的相同动画？

Answer 1

引用此Highcharts loading animation after setdata

我从 Highcharts Champ Sebastian 给出的答案中发现的重要一点是:setData() 之后的动画在 highcharts 中不可用

因此，您应该使用 Chart.destroy 删除现有系列，然后创建新系列以查看动画效果。

chart.series[0].remove();
chart.addSeries({data:[yourData]}) //and other values like type etc

对于默认动画试试这个

   chart: {
        animation: {
            duration: 2000, //whatever you want
            easing: 'easeOutBounce'
        }
    }