我如何將十字線的高地圖設置爲默認位置？

Question

我對angular2項目使用highcharts。目前我正在努力與以下幾點：

我有一個X軸和多個Y軸的同步圖表 - 在鼠標懸停我顯示一個十字線和顯示圖例中的Y軸值。 （簡短演示 - values in legend plugin的示例）

如果我加載圖表，則不會顯示任何值，因爲十字準線會在第一次鼠標懸停後出現。 我在尋找的是在任何時候都顯示十字線，如果沒有鼠標懸停，它應該停留在默認位置（顯示當前最大值）。有沒有辦法實現這種行爲？

我已經嘗試了不同的方法。 plotlines的問題是，我無法獲取圖例中的值來顯示plotline與chart-lines的y值/交點。

此外，我正在使用highcharts的導出功能（離線），並想知道是否有一種方法來導出圖表與圖例和當前值，而不是初始空白的，因爲導出功能重新加載圖表並且由於未設置十字線，因此導出文件中的圖例值爲空。

任何幫助，高度讚賞。

Answer 1

你可以結合你提到的事情來實現你想要的。使用插件中的代碼部分，您可以設置圖例的初始值，在加載時設置plotLine並在mousemove上將其刪除。

渲染初始值：

function renderInitLegendValues() { 
var chart = this, 
    point = chart.series[0].data[2], 
    point2 = chart.series[1].data[2], 
    point3 = chart.series[2].data[2], 
    hoverPoints = chart.hoverPoints = [point, point2, point3], 
    legendOptions = chart.legend.options; 

Highcharts.each(hoverPoints, function(point) { 
    point.series.point = point; 
    point.setState('hover'); 
}); 

Highcharts.each(chart.legend.allItems, function(item) { 
    item.legendItem.attr({ 
    text: legendOptions.labelFormat ? 
     Highcharts.format(legendOptions.labelFormat, item) : legendOptions.labelFormatter.call(item) 
    }); 
}); 
chart.legend.render(); 
} 

處理繪圖線（第一功能不會讓十字準線皮如果繪圖區外的鼠標移動）：

Highcharts.Pointer.prototype.reset = function() { 
    return undefined; 
}; 

function removeInitCrosshair(e) { 
    var normE = chart.pointer.normalize(e.originalEvent); 

    if (chart.isInsidePlot(normE.chartX - chart.plotLeft, normE.chartY - chart.plotTop)) { 
     chart.xAxis[0].removePlotLine('initial-crosshair'); 
     $(this).off('mousemove', removeInitCrosshair); 
    } 
} 

實施例：http://jsfiddle.net/y58w4u9j/1/

至於導出，您可以動態定義繪圖線，懸停時設置點的狀態以及導出之前的圖例值，以便圖像將包括這些變化。