javascript - Highcharts 内边框曲线
问题描述
在下面的柱子/圆柱体上。我试着玩弄
borderRadius
在css中但没有什么对我真正有用,我得到的关闭是这样的,这不是一个选项
jsfiddle 在这里为 cyllinder
这里是专栏。两者都适合我的用例。 https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/column-borderradius/
解决方案
使用默认的 Highcharts API 是不可能的,但是可以通过包装原型函数来添加扩展。您可以使用 wrapdrawPoints
方法将柱形类型从弯曲的顶部边框更改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
推荐阅读
- r - 在 Rmarkdown ioslides 中对齐和调整地图视图窗口的大小
- javascript - 如何将 Laravel 从 Localhost 更改为 live ip 地址?
- java - 将语音识别空白放置在 Fragment 中,然后从 MainActivity 应用程序崩溃中调用
- android - 任何人都可以获取我的数据库引用并在 firebase 数据库中对其进行编辑
- excel - Excel VBA突出显示行和列与2张匹配的单元格
- typescript - 使用打字稿如何定义一个返回相同对象的类型,每个值都有一个承诺
- java - 如何修复运行 Java API(Jetty + Java Service Wrapper)时没有可用的缓冲区空间?
- php - 取消 MySQL InnoDB 中的事务而不是提交或回滚
- python - 从 Python 中用括号括起来的字符串中删除唯一字符
- kubernetes - Kubernetes 手动备份