首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >高架内边界曲线

高架内边界曲线
EN

Stack Overflow用户
提问于 2019-07-03 11:38:28
回答 1查看 70关注 0票数 0

我试着让高图表的顶部边框以这样的方式在里面弯曲

在像下面这样的圆柱上。我试着玩

代码语言:javascript
复制
borderRadius 

在css中,没有什么对我有效,我得到的收尾是这样的,这不是一种选择。

小提琴手来这里是为了赛林德

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/

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-04 18:06:00

这是不可能的,通过使用defualt,但有可能添加一个扩展包装原型函数。您可以包装drawPoints方法,将列形状类型从rect更改为具有弯曲顶部边框的path

代码语言:javascript
复制
(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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56869272

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档