Highcharts 内边框曲线答案

【问题标题】：Highcharts border curve insideHighcharts 内边框曲线
【发布时间】：2019-07-05 02:06:00
【问题描述】：

我正在尝试让 highcharts 顶部边框像这样在内部弯曲

在下面的柱子/圆柱体上。我试着玩弄

borderRadius

在 css 中，但没有什么对我真正有用，我得到的关闭是这样的，这不是一个选项

jsfiddle 是为 cyllinder 准备的

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/cylinder/

这里是专栏。两者都适合我的用例。 https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/column-borderradius/

【问题讨论】：

标签： javascript css highcharts border

【解决方案1】：

使用默认的 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

文档： https://www.highcharts.com/docs/extending-highcharts

【讨论】：