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

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/