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/

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

1 个答案: