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

Question

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

Answer 1

您可以使用 SVGRenderer 类对象来渲染具有某些属性的矩形。你需要做的就是获取具体点的像素值，你可以通过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/