时间戳

首页 > 解决方案 > 如何在高图表中的折线图上结束x与y相交的十字线

reactjs - 如何在高图表中的折线图上结束x与y相交的十字线

问题描述

一张图片可能会解释我想要做的事情更容易。 在此处输入图像描述

当您启用十字准线时，它们会从图表底部一直延伸到顶部。如何创建只触及 x 和 y 点的十字准线？而不是遍历整个图表？

非常感谢任何帮助或指导！

标签： reactjshighcharts

解决方案

您可以使用mosueOver点的事件并使用Highcharts.SVGRenderer类创建自定义十字准线。

point: {
  events: {
    mouseOver: function() {
      const chart = this.series.chart,
        x = this.plotX + chart.plotLeft,
        y1 = this.plotY + chart.plotTop,
        y2 = chart.plotHeight + chart.plotTop

      if (!chart.customcrosshair) {
        chart.customcrosshair = chart.renderer.path().attr({
          'stroke-width': 1,
          'stroke-dasharray': '8,3',
          stroke: 'red'
        }).add();
      }

      chart.customcrosshair.attr({
        d: ['M', x, y1, 'L', x, y2]
      });
    }
  }
}

现场演示：http: //jsfiddle.net/BlackLabel/osphtxjg/

API 参考： https ://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path

推荐阅读