Highcharts 如何使用散点图绘制下图？

如何使用散点图绘制下图？ 我正在尝试实现这种使用Highcharts在屏幕截图中显示的情节。到目前为止，我能够用散点图在图表上画点，但我很难从X轴和Y轴绘制这两条红线。你们谁能帮我画两条从一点开始的直线，一条指向X轴，另一条指向Y轴。附加的代码只是我用来绘制散点图的JS代码。谢谢

这是我的代码。

用来画一条线。您可以在加载事件时绘制线，并在重画事件时重画线

 events: {
    load: function() {
      var point = this.series[0].points[0],
        {
          plotX: x,
          plotY: y
        } = point;

      point.path = this.renderer.path()
        .add(point.series.group)
        .attr({
          stroke: point.color,
          'stroke-width': 1,
          d: `M 0 ${y} L ${x} ${y} L ${x} ${this.plotHeight}`
        });
    },
    redraw: function() {
      var point = this.series[0].points[0],
        {
          plotX: x,
          plotY: y
        } = point,

        path = point.path;

      if (path) {

        path.attr({
          d: `M 0 ${y} L ${x} ${y} L ${x} ${this.plotHeight}`
        })
      }
    }
  }

例如：

另一种解决方案是定义两个额外的点，这些点将在绘图区域之外绘制。您需要设置轴限制并将series.lineWidth设置为1

---

示例：

“这很好，感谢您的快速帮助。我还有一个问题。当我更改X轴或Y轴的值时，这些线始终保持在同一点上，只有X轴和Y轴上的标签会更改。但我想要的是该点应该移动，而不是标签。希望您得到我的关注。”我不确定是否理解您的意思。您使用哪种解决方案？您的意思是，如果更改点的x/y，则该点“未移动”吗？如果是这样，您需要设置轴的最小/最大值，这样域和范围将是固定的-

 events: {
    load: function() {
      var point = this.series[0].points[0],
        {
          plotX: x,
          plotY: y
        } = point;

      point.path = this.renderer.path()
        .add(point.series.group)
        .attr({
          stroke: point.color,
          'stroke-width': 1,
          d: `M 0 ${y} L ${x} ${y} L ${x} ${this.plotHeight}`
        });
    },
    redraw: function() {
      var point = this.series[0].points[0],
        {
          plotX: x,
          plotY: y
        } = point,

        path = point.path;

      if (path) {

        path.attr({
          d: `M 0 ${y} L ${x} ${y} L ${x} ${this.plotHeight}`
        })
      }
    }
  }