Рисование линии между 2 точками на линейном графике с использованием Highcharts?

Question

Можем ли мы провести черту между 2 точками в определенной категории?

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/

Answer 2

Линии графика могут быть созданы на оси 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