Shadcn 堆叠柱状图的顶部圆角设置问题

我太懂这个痛点了！直接给每个Bar加圆角的话，所有柱子的顶部都会圆乎乎的，完全不是我们想要的“整个堆叠顶部只有一个圆角”的效果。其实核心就是只给每个堆叠（每天）最顶部的那个柱子加顶部圆角，其他柱子不加。结合你用map动态生成Bar组件的场景，我给你两种实用方案：

基础方案（假设每天所有Channel都有数据） #

如果你的channelDataKeys是按「从下到上」的堆叠顺序排好的，而且每天每个Channel都有有效值，那直接判断当前Channel是不是数组里的最后一个就行：

{channelDataKeys.map((key, index) => {
  // 最后一个Channel对应堆叠的最顶部
  const isTopChannel = index === channelDataKeys.length - 1;
  return (
    <Bar
      key={key}
      dataKey={key}
      stackId="a"
      fill={getChannelColor(key)} // 替换成你自己的颜色映射逻辑
      // 只给顶部柱子加顶部圆角，数值可以按需调整
      radius={isTopChannel ? { topLeft: 6, topRight: 6 } : {}}
    />
  );
})}

进阶方案（适配部分Channel无数据的情况） #

如果有些天可能部分Channel没有值，上面的基础方案就不准了——比如某天只有前两个Channel有数据，那第三个（数组最后一个）Channel没值，这时候应该给第二个加圆角。这时候我们可以写个小工具函数，动态判断每个日期里的顶部Channel：

// 辅助函数：判断当前Channel是不是某一天的堆叠顶部
const isTopChannelForDay = (dayData, currentChannel) => {
  // 筛选出当天有数据的Channel，保持和渲染顺序一致
  const activeChannels = channelDataKeys.filter(channel => dayData[channel] > 0);
  // 最后一个有数据的Channel就是堆叠顶部
  return activeChannels.length > 0 && activeChannels.at(-1) === currentChannel;
};

// 渲染Bar组件时用回调动态设置圆角
{channelDataKeys.map((key) => (
  <Bar
    key={key}
    dataKey={key}
    stackId="a"
    fill={getChannelColor(key)}
    // 对每个日期的数据单独判断，只给顶部柱子加圆角
    radius={(entry) => {
      const isTop = isTopChannelForDay(entry, key);
      return isTop ? { topLeft: 6, topRight: 6 } : {};
    }}
  />
))}

小提醒 #

• 一定要注意channelDataKeys的顺序！Recharts的堆叠顺序是按Bar组件的渲染顺序来的：先渲染的在下面，后渲染的在上面。所以你的数组顺序要和你想要的堆叠层级对应上。
• 如果你的堆叠是「从上到下」的（先渲染的在最上面），那辅助函数里要把activeChannels.at(-1)改成activeChannels.at(0)哦。

备注：内容来源于stack exchange，提问作者dk9