如何使用 Scatter Plot highchart 绘制下图？

Question

如何使用 Scatter Plot highchart 绘制下图？我正在尝试使用 Highcharts 实现这种在屏幕截图中显示的情节。到目前为止，我可以使用散点图在图表上绘制点，但我无法从 X 轴和 Y 轴绘制这两条红线。你们中的任何人都可以在这里帮助我从一个点绘制两条直线，一条朝向 X 轴，第二条朝向 Y 轴。附上的代码只是我用来绘制散点图的JS代码。谢谢

/* calculationChart */
$(function () {
$('#FHIchart').highcharts({
    chart: {
        type: 'scatter',
        zoomType: 'xy'
    },
    title: {
        text: 'Height Versus Weight of 507 Individuals by Gender'
    },
    subtitle: {
        text: 'Source: Heinz  2003'
    },
    xAxis: {
        title: {
            enabled: true,
            text: 'Strategic Alignment'
        },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true,
    },
    yAxis: {
        title: {
            text: 'Process & Technology Integration'
        },
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        x: 100,
        y: 70,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
        borderWidth: 1
    },
    plotOptions: {
        scatter: {
            lineWidth: 2
        }
    },
    series: [{
            name: ' ',
            color: 'Red',
            data: [[3.1, 3]]
        }]
});
});

这是我的代码。

Answer 1

使用renderer.path画一条线。您可以在加载事件上画线，并在重画事件上重画它。[=14=]

 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}`
        })
      }
    }
  }

示例：https://jsfiddle.net/5j208Lpb/

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

示例：https://jsfiddle.net/5j208Lpb/1/

如何使用 Scatter Plot highchart 绘制下图？

How to draw following graph using Scatter Plot highchart?

highcharts

scatter-plot

scatter