Можно ли показывать диапазоны в старших чартах?

Question

Я пытаюсь построить диаграмму с точками останова на линейной диаграмме с некоторыми диапазонами, можно ли нарисовать такие диаграммы

Answer 1

Вы можете отобразить пользовательские линии графика, используя Highcharts.SVGRenderer класс:

chart: {
    events: {
        render: function() {
            var chart = this,
                xAxis = chart.xAxis[0],
                points = chart.series[0].points,
                x1 = chart.plotLeft,
                x2 = xAxis.toPixels(points[3].x),
                x3 = xAxis.toPixels(points[5].x),
                x4 = chart.plotLeft + chart.plotWidth,
                y = chart.yAxis[0].toPixels(50);

            function getLinePath(xPos1, xPos2) {
                return [
                    'M', xPos1, y,
                    'L', xPos2, y
                ]
            }

            function renderCustomLine(xPos1, xPos2) {
                return chart.renderer.path(getLinePath(xPos1, xPos2))
                    .attr({
                        'stroke-width': 1,
                        stroke: 'black'
                    })
                    .add();
            }

            if (!chart.customLine1) {
                chart.customLine1 = renderCustomLine(x1, x2);
                chart.customLine2 = renderCustomLine(x3, x4);
            } else {
                chart.customLine1.attr({
                    d: getLinePath(x1, x2)
                });
                chart.customLine2.attr({
                    d: getLinePath(x3, x4)
                });
            }


        }
    }
}

---

Демонстрационная версия: https://jsfiddle.net/BlackLabel/uz2vhp0n/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path

---

Или скрыть ненужную часть линии сюжета:

chart: {
    events: {
        render: function() {
            var chart = this,
                points = chart.series[0].points,
                xAxis = chart.xAxis[0],
                yAxis = chart.yAxis[0],
                x = xAxis.toPixels(points[3].x),
                y = yAxis.toPixels(51),
                width = xAxis.toPixels(points[5].x) - xAxis.toPixels(points[3].x),
                height = 3;

            if (!chart.customRect) {
                chart.customRect = chart.renderer.rect(x, y, width, height)
                    .attr({
                        fill: 'white',
                        zIndex: 3
                    })
                    .add();
            } else {
                chart.customRect.attr({
                    x: x,
                    y: y,
                    width: width
                });
            }
        }
    }
}

---

Демонстрационная версия: https://jsfiddle.net/BlackLabel/0ueg68bc/