如何在Victory.js中实现带圆角边缘的堆叠条形图

VictoryBar组件原生支持圆角配置，不需要自定义图形路径，直接使用内置的cornerRadius属性即可，堆叠场景下只要注意圆角的添加位置，避免中间段出现圆角穿模问题：

• 非堆叠条形图：直接给VictoryBar传入数值类型的cornerRadius，值为圆角像素大小即可生效
• 水平堆叠条形图：仅给堆叠序列最左侧的首个柱段添加左侧两个角的圆角，给最右侧的末尾柱段添加右侧两个角的圆角，所有中间柱段圆角设为0
• 圆角数值建议不超过柱宽的1/2，避免圆角变形，示例中柱宽为30，设置8px圆角视觉效果比较自然

修改后的完整可运行代码如下：

import React from "react";
import { render } from "react-dom";
import { VictoryStack, VictoryBar } from "victory";

const Chart = () => {
  return (
    <VictoryStack
      horizontal
      style={{
        data: { stroke: "white", strokeWidth: 3, width: 30 }
      }}
      colorScale={["#9e62c0", "#bc95d4", "#44c973", "#f9c63d", "#f5a000"]}
    >
      {/* 最左侧段：仅左侧加圆角 */}
      <VictoryBar 
        data={[{ x: "c", y: 0.5 }]} 
        cornerRadius={{ topLeft: 8, bottomLeft: 8, topRight: 0, bottomRight: 0 }}
      />
      {/* 中间段：无圆角 */}
      <VictoryBar data={[{ x: "c", y: 1 }]} cornerRadius={0} />
      <VictoryBar data={[{ x: "c", y: 5.2 }]} cornerRadius={0} />
      <VictoryBar data={[{ x: "c", y: 2.3 }]} cornerRadius={0} />
      {/* 最右侧段：仅右侧加圆角 */}
      <VictoryBar 
        data={[{ x: "c", y: 1 }]} 
        cornerRadius={{ topRight: 8, bottomRight: 8, topLeft: 0, bottomLeft: 0 }}
      />
    </VictoryStack>
  );
};

render(<Chart />, document.getElementById("root"));

如果要实现默认垂直方向的圆角堆叠条形图，调整圆角对应位置即可：给最底部的柱段添加左下、右下圆角，最顶部的柱段添加左上、右上圆角，中间段圆角设为0。

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