动画 addPlotBand Highcharts

Question

有没有办法添加平滑过渡的绘图带？在我使用

之前

addPlotLine and 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);

我也在尝试这个 Highcharts plotBand animation 的解决方案。然而，我似乎无法正确实施它。供您参考 here is the code of where is used addPlotLine and addPlotBand and this 是当前使用的代码风格。感谢您对此的帮助。谢谢。

Answer 1

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

在 setiInterval 之前添加 plotband，并在每个时间间隔将其设置为 plotline。

const plotbandPath = plotband.svgElem.d.split(' ')
plotbandPath[7] = plotbandPath[9] = newY

plotband.svgElem.animate({
  d: plotbandPath
}, 300)

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

动画 addPlotBand Highcharts

animate addPlotBand Highcharts

highcharts

highstock