javascript - setData 上的 Highcharts 区域图动画

Question

我有一个 HighCharts.js 图表，当点击一个按钮时，调用 setData 添加另一个数据点。

我希望更改将它从 0 带到当前下一个数据点的动画，而不是从左到右平滑地制作动画，就好像它只是在填充/扩展一样。加载时会显示准确的动画。

我有如下简单的 setData，其中动画属性设置为 true。

series.setData(data, true, true);

我创建了这个 http://jsfiddle.net/44ejxsaa/1/创建我得到的动画的简单示例。请点击按钮几次以查看。

Answer 1

您可以从数组中删除 0 个条目，因为它们会导致图表从最后一点向下连接到轴:

data = [29.9, 71.5, 106.4, 129.2, 144.0];

然后设置默认的 minRange 和 min，这样在初始化时您仍然可以看到轴远至 12:

xAxis: {
    labels: {
        style: {
            fontSize: '13px'
        }
    },
    min: 0,
    minRange: 12,
},

然后使用 addPoint 而不是 setData 来获取添加点的默认动画。虽然它与您在加载时看到的不太一样 - 该点会立即出现。

series.addPoint({x : arrayLocation, y: increasingValue});

我还将 arrayLocation 初始化为 5 以使其正常工作(否则它会在 x=5 处生成两个点。

var arrayLocation = 5;

fiddle