如何将 highcharts 中的十字准线设置为默认位置？

Question

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

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

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

我已经尝试过不同的方法。情节线的问题是，我无法获取图例中的值来显示带有图表线的情节线的 y-values/intersections。

此外，我正在使用 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/

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

如何将 highcharts 中的十字准线设置为默认位置？

How can I set the crosshair in highcharts to a default position?

position

export

highcharts

highstock

angular