动画添加绘图带高图表

Question

有没有办法添加具有平滑过渡的绘图带？使用之前

添加绘图线和addPlotBand

chart.yAxis[0].removePlotBand('plot-band-1');
chart.yAxis[0].removePlotLine('plot-line-1');
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
chart.yAxis[0].addPlotBand({
from: 100000,
to: y,
color: {
linearGradient: { x1: 1, y1: 1, x2: 1, y2: 0 },
stops: [
[0, 'rgba(46, 230, 0, 0.22)'],
[1, 'rgba(46, 230, 0, 0)'] //down
]
},
id: 'plot-band-1'
});
chart.yAxis[0].addPlotLine({
value: y,
color: 'red',
width: 2,
id: 'plot-line-1'
});

在动态图表上绘制点，但现在我使用animate使绘图更流畅

plotLine = yAxis.plotLinesAndBands[0].svgElem;
d = plotLine.d.split(' ');
newY = yAxis.toPixels(y) - d[2];
plotLine.animate({
translateY: newY
}, 300);

我也在尝试这个高图表绘图带动画的解决方案。 但是我似乎无法正确实现它。 供您参考，这里是使用addPlotLine和addPlotBand的代码，这是当前使用的代码样式。感谢您对此的帮助。谢谢。

Answer 1

如果将路径 d 属性作为数组传递，则可以将其动画化为简单形状。

在 setiInterval 之前添加绘图带，并将其作为每个间隔的绘图线进行动画处理。

const plotbandPath = plotband.svgElem.d.split(' ')
plotbandPath[7] = plotbandPath[9] = newY
plotband.svgElem.animate({
d: plotbandPath
}, 300)

示例：http://jsfiddle.net/sqer2x13/