在下面的列/圆柱上。我尝试玩
borderRadius
在css中,但对我没有任何帮助,我遇到的关闭是这样的,这是不可行的
jsfiddle在这里用于cyllinder
,此处为专栏。两者都适合我的用例。 https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/column-borderradius/
答案 0 :(得分:1)
使用defualt Highcharts API无法实现,但是可以通过包装原型函数来添加扩展。您可以包装drawPoints
方法,以将具有弯曲顶部边框的列形状类型从rect
更改为path
。
(function(H) {
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
this.points.forEach(function(point) {
var sArgs = point.shapeArgs;
point.shapeType = 'path';
point.shapeArgs = {
'd': [
'M', sArgs.x, sArgs.y,
'Q', sArgs.x + sArgs.width / 2,
sArgs.y + sArgs.width / 2,
sArgs.x + sArgs.width, sArgs.y,
'L', sArgs.x + sArgs.width, sArgs.y + sArgs.height,
sArgs.x, sArgs.y + sArgs.height, 'z'
]
}
});
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
实时演示: http://jsfiddle.net/BlackLabel/as6y1uhn/
API参考: https://api.highcharts.com/class-reference/Highcharts#.wrap