如何更新新的 plotline 值而不是在 highcharts 中删除和添加新值

Question

我有一个报价的动态值。水平线表示折线图上的当前位置。要移动它，我必须在每次收到新邮件时删除并添加最后一个。我需要为这条情节线的过渡设置动画，这就是为什么它不应该被删除并重新创建的原因。

现在是这样：

                    chart.yAxis[0].removePlotLine('current-price');

                    chart.yAxis[0].addPlotLine({
                        value: parsedData.quote,
                        color: 'black',
                        width: 0.5,
                        id: 'current-price',

                            useHTML:true
                        },
                        zIndex:100
                    });

Answer 1

Update: The solution below is best suited for Highcharts. During subsequent comments and clarification, I learned the original poster is using Highstock, which does not support the scatter plot type. I was not successful in adapting this solution to their code, which was an areaspline chart using data points updated in real time.

与其使用情节线，我建议创建一个新系列作为您的线。这样，您可以根据需要更新系列，它会选择 Highcharts 提供的原生动画。

这是一个使用基本折线图的工作示例：http://jsfiddle.net/brightmatrix/ws3e1wns/

下面是新系列的代码，使用了scatter类型。请注意，我禁用了标记，添加了线宽，并将 showInLegend 和 enableMouseTracking 设置为 false，这样您的用户就不会将其视为 "true"数据系列。

series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        // scatter plot line to serve as moveable plot line
        type: 'scatter', 
        data: [[0,10],[11,10]], 
        lineWidth: 1, 
        marker: {
            enabled: false          // hide the markers (to show only the line)
        },
        showInLegend: false,        // hide in legend
        enableMouseTracking: false  // prevent user from interacting with this line
}]

每当您单击此 fiddle 中的按钮时，它都会将新系列线在 y 轴上向上移动 10 个点。为此，我更新了行的两端：

// button handler
var chart = $('#container').highcharts(),
    y = 30;
$('#button').click(function () {
    y += 10;
    // update both ends of the scatter line
    chart.series[1].data[0].update([0,y]);
    chart.series[1].data[1].update([11,y]);
});

如您所见，线条在移动时会呈现动画效果。

希望对您有所帮助！

Answer 2

可以直接更新选项，然后更新坐标轴：

var newValue = (chart.xAxis[0].options.plotLines[0].value + 1) % 10;
chart.xAxis[0].options.plotLines[0].value = newValue;
chart.xAxis[0].update();

fiddle: https://jsfiddle.net/aviram26/v8xte4hL/

Answer 3

我们可能都看过以下页面，但它们并没有真正包含答案。

https://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines https://api.highcharts.com/highcharts/xAxis.plotLines

@Aviram 有一个很好的解决方案，但我的示例包含更多数据，导致重绘缓慢。

我发现 update() 调用在某些情况下会执行 redraw/rerender (source link)，这对于大型地块来说可能非常昂贵且缓慢。我使用下面的代码来更新情节线，它似乎更新情节线非常快。我更新 plotLines 和 plotLinesAndBands 的原因是，在某些情况下，当您重绘 lines/axis 时需要匹配。

[chart].xAxis[0].options.plotLines[0].value = newVal;   
[chart].xAxis[0].plotLinesAndBands[0].options.value = newVal;
[chart].xAxis[0].plotLinesAndBands[0].render();

上面使用的 render 函数无论如何都会在重绘时调用 (source link)，所以我们没有在这里做任何疯狂的事情！

如何更新新的 plotline 值而不是在 highcharts 中删除和添加新值

How to update new plotline values instead of removing and adding new ones in highcharts

highcharts

highstock