如何更新新的剧情值而不是在高图中删除和添加新的剧情值

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

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

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

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

下面是新系列，其使用scatter类型的代码。请注意，我禁用了标记，添加了一条线宽，并将和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]); 
}); 

正如您所看到的，该行在移动时会进行动画处理。

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