Highcharts：是否可以为柱形图中的柱设置顶部边框半径？

Question

我正在尝试设置如下所示的柱形图：

我想将列的顶部边框半径设为圆角。

我找到了一个看起来像这样的解决方案：

plotOptions: {
    series: {
        borderRadius: 8
    }
},

然而，问题是列底部的边框也以这种方式变圆：

并且无法将字符串传递给 borderRadius 参数，每个角都有多个参数。例如borderRadius: '5px 0'。是否可以通过某种方式进行设置？

这是我一直提到的部分文档：documentation

注意：使用 JQuery 可以解决此类问题，但我想知道是否可以在 React 中设置？

Answer 1

我实际上可以使用这个插件修改它highcharts-border-radius。在带有柱形图的组件中，我添加了以下导入：

const borderRadius = require('highcharts-border-radius');
borderRadius(Highcharts);

并且在作为 options 道具传递给 HighchartsReact 组件的配置对象中，我添加了以下内容：

plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        },
        series: {
            borderRadiusTopLeft: 8,
            borderRadiusTopRight: 8
        }
    },

这个设置对我有用

Highcharts：是否可以为柱形图中的柱设置顶部边框半径？

Highcharts: is it possible to set up top border radius for the columns in Column chart?

javascript

data-visualization

highcharts

reactjs

column-chart