Highchart如何自定义阶梯折线图?
How to customise step line chart in Highchart?
我知道这很奇怪,但我想自定义阶梯折线图,例如水平阶梯较粗,垂直阶梯较细,有什么办法可以实现吗?
提前致谢
您可以在与水平线相同的位置渲染其他线。请检查以下解决方案:
chart: {
events: {
render: function() {
const points = this.series[0].points;
points.forEach(point => {
const nextPoint = points[point.index + 1];
if (nextPoint) {
const d = [
'M',
point.plotX + this.plotLeft - 1,
point.plotY + this.plotTop,
'L',
nextPoint.plotX + this.plotLeft + 1,
point.plotY + this.plotTop
];
if (point.customPath) {
point.customPath.attr({
d
});
} else {
point.customPath = this.renderer
.path([])
.attr({
d,
stroke: 'red',
'stroke-width': 7
})
.add();
}
}
});
}
}
}
现场演示: http://jsfiddle.net/BlackLabel/wc5zrax9/
API参考:https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
我知道这很奇怪,但我想自定义阶梯折线图,例如水平阶梯较粗,垂直阶梯较细,有什么办法可以实现吗?
提前致谢
您可以在与水平线相同的位置渲染其他线。请检查以下解决方案:
chart: {
events: {
render: function() {
const points = this.series[0].points;
points.forEach(point => {
const nextPoint = points[point.index + 1];
if (nextPoint) {
const d = [
'M',
point.plotX + this.plotLeft - 1,
point.plotY + this.plotTop,
'L',
nextPoint.plotX + this.plotLeft + 1,
point.plotY + this.plotTop
];
if (point.customPath) {
point.customPath.attr({
d
});
} else {
point.customPath = this.renderer
.path([])
.attr({
d,
stroke: 'red',
'stroke-width': 7
})
.add();
}
}
});
}
}
}
现场演示: http://jsfiddle.net/BlackLabel/wc5zrax9/
API参考:https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path