Chart.js 4.4.0中Y轴最小值非0时如何实现全圆角柱状图？

核心原因 #

当Y轴最小值设为非0值时，柱状图的底部不再是图表的基线（0位置），但默认配置中borderSkipped为'bottom'，会跳过底部圆角的渲染，导致底部变平。

无插件解决方案 #

只需调整两个关键配置，结合动态圆角计算即可实现全圆角：

1. 关闭圆角跳过设置
   将数据集的borderSkipped设为false，强制Chart.js渲染四个角的圆角：

   datasets: [{
     // 其他数据集配置（数据、颜色等）
     borderSkipped: false,
   }]
   

2. 动态设置圆角（适配矮柱子）
   如果存在高度较小的柱子，直接固定四个角的圆角可能导致显示异常（比如圆角超过柱子高度），可以用函数形式动态计算圆角大小：

   datasets: [{
     // 其他数据集配置
     borderSkipped: false,
     borderRadius: (context) => {
       const yAxis = context.chart.scales.y;
       const barTop = yAxis.getPixelForValue(context.parsed.y);
       const barBottom = yAxis.getPixelForValue(yAxis.min);
       const actualBarHeight = barBottom - barTop;
       const targetRadius = 8; // 自定义圆角大小
   
       // 底部圆角不超过柱子高度的一半，避免异常
       const bottomRadius = actualBarHeight > targetRadius * 2 ? targetRadius : actualBarHeight / 2;
       return {
         topLeft: targetRadius,
         topRight: targetRadius,
         bottomLeft: bottomRadius,
         bottomRight: bottomRadius
       };
     }
   }]
   

3. Y轴配置确认
   确保Y轴正确设置最小值，且不强制从0开始：

   scales: {
     y: {
       beginAtZero: false,
       min: 1 // 你的目标最小值
     }
   }
   

简化版配置（柱子高度足够时） #

如果所有柱子的高度都远大于设置的圆角大小，可直接固定四个角的圆角：

datasets: [{
  // 其他配置
  borderSkipped: false,
  borderRadius: {
    topLeft: 8,
    topRight: 8,
    bottomLeft: 8,
    bottomRight: 8
  }
}]

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