我如何将十字线的高地图设置为默认位置？

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/

至于导出，您可以动态定义绘图线，悬停时设置点的状态以及导出之前的图例值，以便图像将包括这些变化。