如何更新新的劇情值而不是在高圖中刪除和添加新的劇情值

我有一個動態的報價值。水平線表示折線圖上的當前位置。要移動它，我必須刪除並添加最後一個每次我收到新的。我需要爲這條情節線的過渡動畫，這就是爲什麼它不應該被刪除並重新創建。如何更新新的劇情值而不是在高圖中刪除和添加新的劇情值

這就是現在的樣子：

    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 
        });

來源

2016-06-15 Fedor Alexandrovich

嗨，我認爲你可以用你的情節主線的svgElem和使用Highcharts.animate（）方法用於動畫這條情節線。在這裏你可以找到一個例子它如何工作：http://jsfiddle.net/vqerk3zz/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/

來源

2017-04-04 08:03:48 Aviram

更新：下面的解決方案是最適合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]); 
});

正如您所看到的，該行在移動時會進行動畫處理。

我希望這對你有幫助和有用！

來源

2016-06-15 11:54:24

這看起來像個好主意。你能否告訴我如何在我的情況下，用我的變量來製作它。我不是很瞭解這個代碼... –

@FedorAlexandrovich我需要看到更多的圖表代碼才能準確地與您的變量進行匹配。你能在小提琴中提供嗎？ –

是的，請。 https://jsfiddle.net/fedorbass/xxp0pts0/請先看看第一條評論線 –

如何更新新的劇情值而不是在高圖中刪除和添加新的劇情值

回答

相關問題