Question

如何使用Scatter Plot highchart绘制下图？我试图实现这种使用Highcharts在屏幕截图中显示的情节。到现在为止，我可以使用Scatter Plot将点绘制到图表上，但是我无法从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绘制一条线。您可以在加载事件上绘制线条并在重绘事件上重绘它。

 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绘制下图？

1 个答案: