如何在Highcharts JS中为柱状图柱子设置顶部圆角？

当前效果 #

期望效果 #

我的现有配置 #

plotOptions: {
                   column: {
                      maxPointWidth: 36,
                      stacking: 'normal'
                   },
                   series: {
                      borderRadius: 5
                   }
            }

当然可以不借助任何插件实现！你现在的问题是把borderRadius配置在了全局series下，导致所有柱子的四个角都有圆角，而期望效果是堆叠柱子仅顶部和底部保留圆角、中间堆叠部分为直角。只需要调整配置的位置和写法就行：

修改后的配置代码 #

plotOptions: {
    column: {
        maxPointWidth: 36,
        stacking: 'normal',
        // 精准控制四个角的圆角，Highcharts会自动处理堆叠层级的圆角显示
        borderRadius: {
            topLeft: 5,
            topRight: 5,
            bottomLeft: 5,
            bottomRight: 5
        },
        // 去掉柱子间的空隙，让堆叠效果更连贯
        groupPadding: 0,
        pointPadding: 0
    }
}

原理说明 #

当把borderRadius配置在column的plotOptions中时，Highcharts会自动识别堆叠的层级：

• 最顶部的柱子会保留顶部的圆角
• 最底部的柱子会保留底部的圆角
• 中间堆叠的柱子会自动隐藏上下方向的圆角，只保留左右的直角，完美匹配你想要的效果

如果想要更简洁的写法，也可以用数组形式指定圆角（顺序为[topLeft, topRight, bottomRight, bottomLeft]）：

plotOptions: {
    column: {
        maxPointWidth: 36,
        stacking: 'normal',
        borderRadius: [5, 5, 5, 5],
        groupPadding: 0,
        pointPadding: 0
    }
}

内容的提问来源于stack exchange，提问作者Ilyas