是否可以在高图中显示范围答案

【问题标题】：Is it possible to show ranges in highcharts是否可以在高图中显示范围
【发布时间】：2019-10-01 06:54:41
【问题描述】：

我正在尝试绘制一个图表，它在折线图上有一些范围的断点是否可以绘制这种图表

【问题讨论】：

你能分享一些你正在尝试使用的数据吗？请在highcharts.com/demo查看演示
嗨@kommineni prasanna sai，您能否更准确地描述问题并为我提供一些最小的实例？
我们在 x 和 yaxis 中都有绘图线选项，我想根据 x 轴类别用 y 轴划分绘图线，有什么选择吗？jsfiddle.net/1dxf4gwr，我想从 1 月 1 日到 1 月 4 日和 1 月 5 日到 9 日分割水平黑线，请您提供一种方法

【解决方案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/

【讨论】：