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

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

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

小提琴：https://jsfiddle.net/aviram26/v8xte4hL/

Answer 2

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

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

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

我发现update()调用会在某些情况下（source link）执行重绘/重新渲染，这对于大型绘图来说可能非常昂贵且速度很慢。我使用以下代码只更新绘图线，它似乎很快更新绘图线。我更新plotLines和plotLinesAndBands的原因，在某些情况下，当您重绘行/轴时，需要匹配。

[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），所以这里没有做任何疯狂的事情！

Answer 3

更新：以下解决方案最适合 Highcharts 。在随后的评论和澄清中，我了解到原始海报使用的是 Highstock ，它不支持scatter绘图类型。我没有成功地将此解决方案应用于他们的代码，这是一个使用实时更新的数据点的areaspline图表。

我建议创建一个新系列，而不是使用情节线。这样，您可以根据需要更新系列，它将获取Highcharts提供的原生动画。

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

以下是新系列的代码，它使用scatter类型。请注意，我已停用标记，添加了线宽，并将showInLegend和enableMouseTracking设置为false，因此您的用户不会将其视为“真实”数据系列

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
}]

每当您单击此小提琴中的按钮时，它将在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]);
});

如您所见，该线在移动时会动画。

我希望这对你有用和有用！

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

3 个答案: