如何在MUI X Charts中创建顶部带圆角的柱状图

问题描述 #

我需要创建顶部带有圆角的MUI X柱状图，参考效果为顶部圆角的垂直柱状图。我尝试了以下代码，但仅实现了水平方向的圆角，无法达到顶部圆角的效果，请求提供正确的实现方案。

原尝试代码 #

import { BarChart, LineChart, PieChart } from "@mui/x-charts";

const users = [
  { label: "bachir", value: 1730 },
  { label: "Othman", value: 1230 },
  { label: "Badawi", value: 1030 },
  { label: "Achor", value: 1930 },
  { label: "Morad", value: 730 },
];

const App = () => {
  return (
    <div>
      <h1>Hello there </h1>

      <PieChart
        series={[
          {
            data: users,
            innerRadius: 30,
            outerRadius: 60,
            paddingAngle: 5,
            cornerRadius: 5,
            startAngle: -100,
            endAngle: 360,
            cx: 150,
            cy: 190,
          },
        ]}
        width={400}
        height={400}
      />
      <BarChart
        height={200}
        series={[{ data: users.map((user) => user.value) }]}
        layout="vertical"
        slots={{
          bar: (props) => {
            const radius = 7;
            const { x, y, height, width, ownerState, ...restProps } = props;

            // Path of a rectangle with rounded corners
            const d = `M${x},${y} h${
              width - radius
            } a${radius},${radius} 0 0 1 ${radius},${radius}v ${
              height - 2 * radius
            } a${radius},${radius} 0 0 1 ${-radius},${radius} h${
              radius - width
            }z`;
            return <path d={d} fill="rgba(255, 122, 0, 0.8)" />;
          },
        }}
      />
    </div>
  );
};

export default App;

解决方案 #

针对layout="vertical"的垂直柱状图，我们需要修改自定义bar组件的SVG路径逻辑，将圆角仅应用在柱子的顶部。以下是修改后的完整代码：

import { BarChart, LineChart, PieChart } from "@mui/x-charts";

const users = [
  { label: "bachir", value: 1730 },
  { label: "Othman", value: 1230 },
  { label: "Badawi", value: 1030 },
  { label: "Achor", value: 1930 },
  { label: "Morad", value: 730 },
];

const App = () => {
  return (
    <div>
      <h1>Hello there </h1>

      <PieChart
        series={[
          {
            data: users,
            innerRadius: 30,
            outerRadius: 60,
            paddingAngle: 5,
            cornerRadius: 5,
            startAngle: -100,
            endAngle: 360,
            cx: 150,
            cy: 190,
          },
        ]}
        width={400}
        height={400}
      />
      <BarChart
        height={200}
        series={[{ data: users.map((user) => user.value) }]}
        layout="vertical"
        slots={{
          bar: (props) => {
            const radius = 7;
            const { x, y, height, width, ...restProps } = props;

            // 绘制仅顶部带圆角的柱子路径
            const d = `M${x},${y} 
              h${width} 
              v${-(height - radius)} 
              a${radius},${radius} 0 0 0 ${-radius},${-radius} 
              h${-(width - 2 * radius)} 
              a${radius},${radius} 0 0 0 ${-radius},${radius} 
              v${height - radius} 
              z`;
            return <path d={d} fill="rgba(255, 122, 0, 0.8)" />;
          },
        }}
      />
    </div>
  );
};

export default App;

核心逻辑说明 #

这段代码调整了SVG路径的绘制顺序，确保圆角只出现在柱子顶部：

1. 从柱子左下角出发，绘制底部水平直角边
2. 向上绘制右侧垂直边，到距离顶部radius的位置
3. 绘制右上角的圆角圆弧
4. 水平绘制顶部的直线段（连接两个圆角）
5. 绘制左上角的圆角圆弧
6. 向下绘制左侧垂直边，回到起点

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