Question

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

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

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

我已经尝试了不同的方法。情节线的问题是，我无法获取图例中的值来显示情节线与图表线的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/

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

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

1 个答案: