Recharts柱状图背景圆角设置问题求助

针对你遇到的问题——已为柱状图的柱子添加圆角，但背景部分无法设置圆角，这里提供几种可行的实现方法：

方法一：自定义SVG背景轨道 #

如果需要给柱子后方的整个背景轨道添加圆角，可以在BarChart内部直接插入带圆角的SVG矩形作为背景：

<BarChart
  data={timelineDetailsData(metrics.dates.today, metrics.dates.middle)}
  barGap={14}
  margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
  maxBarSize={2000}
  barSize={100}
  layout="vertical"
>
  {/* 定义带圆角的背景矩形 */}
  <defs>
    <rect id="chartBg" rx="10" ry="10" width="100%" height="100%" fill="#e8f1f8" />
  </defs>
  {/* 渲染背景 */}
  <use href="#chartBg" x="0" y="0" />

  {/* 原有轴配置 */}
  <XAxis
    domain={[0,
      monthDiff(
        new Date(parseInt(metrics.dates.today.split(" ")[1]), getMonthsinNumber[metrics.dates.today.split(" ")[0].toLowerCase()]),
        new Date(parseInt(metrics.dates.latest.split(" ")[1]), getMonthsinNumber[metrics.dates.latest.split(" ")[0].toLowerCase()])
      )]} 
    tick={false} 
    axisLine={false} 
    type="number" 
    tickLine={false} 
    padding={{ left: 0, right: 0 }} 
  />
  <YAxis type="category" dataKey="currency" axisLine={false} tickLine={false} />
  
  {/* 数据柱子 */}
  <Bar dataKey="middleDate" fill="#2E76B6" radius={10} barSize={60} >
    <LabelList dataKey="timelabel" position="insideLeft" style={{ fill: "white" }} />
  </Bar>
</BarChart>

你可以根据需求修改fill的颜色，以及rx/ry的数值来调整圆角大小。

方法二：自定义带圆角的Bar背景条 #

如果你的“背景部分”指的是Bar组件background属性对应的默认背景条，由于Recharts默认不支持给这个背景条设置圆角，你可以自定义背景组件替换它：

// 自定义带圆角的背景组件
const RoundedBackgroundBar = ({ x, y, width, height }) => (
  <rect
    x={x}
    y={y}
    width={width}
    height={height}
    rx="10"
    ry="10"
    fill="#d1e4f2"
    opacity={0.6}
  />
);

// 在BarChart中使用
<BarChart
  data={timelineDetailsData(metrics.dates.today, metrics.dates.middle)}
  barGap={14}
  margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
  maxBarSize={2000}
  barSize={100}
  layout="vertical"
>
  {/* 原有轴配置 */}
  <XAxis
    domain={[0,
      monthDiff(
        new Date(parseInt(metrics.dates.today.split(" ")[1]), getMonthsinNumber[metrics.dates.today.split(" ")[0].toLowerCase()]),
        new Date(parseInt(metrics.dates.latest.split(" ")[1]), getMonthsinNumber[metrics.dates.latest.split(" ")[0].toLowerCase()])
      )]} 
    tick={false} 
    axisLine={false} 
    type="number" 
    tickLine={false} 
    padding={{ left: 0, right: 0 }} 
  />
  <YAxis type="category" dataKey="currency" axisLine={false} tickLine={false} />
  
  {/* 数据柱子，使用自定义背景 */}
  <Bar 
    dataKey="middleDate" 
    fill="#2E76B6" 
    radius={10} 
    barSize={60}
    background={<RoundedBackgroundBar />}
  >
    <LabelList dataKey="timelabel" position="insideLeft" style={{ fill: "white" }} />
  </Bar>
</BarChart>

这种方式会给每个柱子对应的背景条都加上圆角，和数据柱子的圆角效果保持一致。

方法三：给图表容器加圆角 #

如果需要给整个柱状图的外层容器添加圆角，直接给包裹BarChart的div加CSS样式即可：

.chart-container {
  border-radius: 10px;
  overflow: hidden;
}

然后在组件中用这个容器包裹BarChart：

<div className="chart-container">
  <BarChart {/* 原有配置 */}>
    {/* 内部元素 */}
  </BarChart>
</div>

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