如何将高图中的十字准线设置为默认位置？答案

【问题标题】：How can I set the crosshair in highcharts to a default position?如何将高图中的十字准线设置为默认位置？
【发布时间】：2016-10-11 23:12:14
【问题描述】：

我在 angular2 的项目中使用 highcharts。目前我正在努力解决以下问题：

我有一个带有一个 x 轴和多个 y 轴的同步图表 - 在鼠标悬停时，我会显示一个十字准线并在图例中显示 y 轴值。（values in legend plugin 的简短演示示例）

如果我加载图表，则不会显示任何值，因为第一次鼠标悬停后会出现十字准线。我正在寻找的是始终显示十字准线，如果没有鼠标悬停，它应该保持在默认位置（显示的最新值）。有没有办法实现这种行为？

我已经尝试了不同的方法。绘图线的问题是，我无法获取图例中的值来显示绘图线与图表线的 y 值/交点。

此外，我正在使用 highcharts 的导出功能（离线），我想知道是否有一种方法可以导出带有图例和当前值的图表，而不是初始的空值，因为导出函数会重新加载图表和由于未设置十字准线，因此导出文件中的图例值为空。

非常感谢任何帮助。

【问题讨论】：

标签： angular highcharts position export highstock

【解决方案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/

至于导出，您可以在导出之前动态定义绘图线、悬停时设置点的状态以及图例的值，因此图像将包含这些更改。

【讨论】：

谢谢！正如我在 highcharts-forum 中提出的问题 - 这里是另一个可能的链接 solution