在高图表中为列范围设置左/右边框半径

Question

有没有办法为列范围的左/右区域设置边框半径？我很接近，但需要稍微调整，因为我不需要两侧的边框半径，只需要每边一个。

我希望双方像第一个例子一样相遇，但在它们相遇的两端没有边界半径(所以它们匹配得很好(，而不是像第一个例子的第二部分那样重叠。

这是代码：

http://jsfiddle.net/6qsvjark/600/

series: [{
name: 'Task 1',
stack: 'Tasks',
data: [{
x: 0,
low: 7,
high: 8
}, {
x: 1,
low: 6.5,
high: 7.75
}],
borderRadius: 10,
borderWidth: 0
}, {
name: 'Task 2',
stack: 'Tasks',
data: [{
x: 0,
low: 8,
high: 9
}, {
x: 1,
low: 7.5,
high: 8.5
}],
borderRadius: 10,
borderWidth: 0
}]

Answer 1

@Matias Cerrotta 提到的自定义插件只有在修改为与columnrange图表一起使用后才能工作。

.JS

$(function() {
'use strict';
(function(factory) {
if (typeof module === 'object' && module.exports) {
module.exports = factory;
} else {
factory(Highcharts);
}
}(function(Highcharts) {
(function(H) {
H.wrap(H.seriesTypes.columnrange.prototype, 'translate', function(proceed) {
const options = this.options;
const topMargin = options.topMargin || 0;
const bottomMargin = options.bottomMargin || 0;
proceed.call(this);
H.each(this.points, function(point) {
if (options.borderRadiusTopLeft || options.borderRadiusTopRight || options.borderRadiusBottomRight || options.borderRadiusBottomLeft) {
const w = point.shapeArgs.width;
const h = point.shapeArgs.height;
const x = point.shapeArgs.x;
const y = point.shapeArgs.y;
let radiusTopLeft = H.relativeLength(options.borderRadiusTopLeft || 0, w);
let radiusTopRight = H.relativeLength(options.borderRadiusTopRight || 0, w);
let radiusBottomRight = H.relativeLength(options.borderRadiusBottomRight || 0, w);
let radiusBottomLeft = H.relativeLength(options.borderRadiusBottomLeft || 0, w);
const maxR = Math.min(w, h) / 2
radiusTopLeft = radiusTopLeft > maxR ? maxR : radiusTopLeft;
radiusTopRight = radiusTopRight > maxR ? maxR : radiusTopRight;
radiusBottomRight = radiusBottomRight > maxR ? maxR : radiusBottomRight;
radiusBottomLeft = radiusBottomLeft > maxR ? maxR : radiusBottomLeft;
point.dlBox = point.shapeArgs;
point.shapeType = 'path';
point.shapeArgs = {
d: [
'M', x + radiusTopLeft, y + topMargin,
'L', x + w - radiusTopRight, y + topMargin,
'C', x + w - radiusTopRight / 2, y, x + w, y + radiusTopRight / 2, x + w, y + radiusTopRight,
'L', x + w, y + h - radiusBottomRight,
'C', x + w, y + h - radiusBottomRight / 2, x + w - radiusBottomRight / 2, y + h, x + w - radiusBottomRight, y + h + bottomMargin,
'L', x + radiusBottomLeft, y + h + bottomMargin,
'C', x + radiusBottomLeft / 2, y + h, x, y + h - radiusBottomLeft / 2, x, y + h - radiusBottomLeft,
'L', x, y + radiusTopLeft,
'C', x, y + radiusTopLeft / 2, x + radiusTopLeft / 2, y, x + radiusTopLeft, y,
'Z'
]
};
}
});
});
}(Highcharts));
}));
window.chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'columnrange',
inverted: true
},
title: {
text: "Top Chart"
},
xAxis: {
categories: ['Customer A', 'Customer B']
},

legend: {
enabled: true
},
plotOptions: {
columnrange: {
grouping: false,

}
},
series: [{
name: 'Task 1',
stack: 'Tasks',
borderRadiusBottomLeft: 10,
borderRadiusBottomRight: 10,
data: [{
x: 0,
low: 7,
high: 8
}, {
x: 1,
low: 6.5,
high: 7.75
}],
}, {
name: 'Task 2',
stack: 'Tasks',
borderRadiusTopLeft: 10,
borderRadiusTopRight: 10,
data: [{
x: 0,
low: 8,
high: 9
}, {
x: 1,
low: 7.5,
high: 8.5
}],
}]
});
window.chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container2',
type: 'columnrange',
inverted: true
},
title: {
text: "Bottom Chart"
},
xAxis: {
categories: ['Customer A', 'Customer B']
},

legend: {
enabled: true
},
series: [{
name: 'Data',
data: [{
x: 0,
low: 7,
high: 8
}, {
x: 0,
low: 8,
high: 9,
color: "#202020"
}, {
x: 1,
low: 6.5,
high: 7.5
}, {
x: 1,
low: 7.5,
high: 8.5,
color: "#202020"
}]
}]
});
});

小提琴示范