使用Highcharts在折线图中的2点之间画一条线？

Question

我们可以在特定类别的2点之间画线吗？

Answer 1

可以在x轴上创建图线。也可以在两个轴上创建它：

xAxis: {
  plotLines: [{
    color: 'red', // Color value
    dashStyle: 'longdashdot', // Style of the plot line. Default to solid
    value: 3, // Value of where the line will appear
    width: 2 // Width of the line    
  }]
},

参考：https://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines

Answer 2

您可以使用SVGRenderer类对象来渲染具有某些属性的rect。您需要做的就是获取特定的点像素值，通过Axis.toPixels方法可以实现，然后仅根据获得的数据渲染rect元素。这是代码：

var chart = Highcharts.chart('container', {
        chart: {
            events: {
        load() {
            var xAxis = this.xAxis[0],
            yAxis = this.yAxis[0],
            pointX = 5,
            pointY = 125000,
            secondPointY = 50000,
            width = 4,
            height = yAxis.toPixels(secondPointY) - yAxis.toPixels(pointY);

            this.renderer.rect(
            xAxis.toPixels(pointX) - (width / 2),
            yAxis.toPixels(pointY),
            width,
            height
          ).attr({
            fill: 'red'
          }).add()
        }
      }
    },
    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }]
});

API参考：

https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect

实时示例： https://jsfiddle.net/h12q5x0d/