Recharts技术问题：如何将雷达图的边缘设置为圆角

要给Recharts雷达图的边缘设置圆角，有两种常用实现方式：

方法一：利用内置SVG线条属性 #

直接在Radar组件上添加两个SVG线条属性，就能快速让折线的转角和端点变成圆角：

import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis } from 'recharts';

const radarData = [
  { subject: 'Math', score: 120, fullMark: 150 },
  { subject: 'Chinese', score: 98, fullMark: 150 },
  { subject: 'English', score: 86, fullMark: 150 },
  { subject: 'Physics', score: 99, fullMark: 150 },
  { subject: 'Chemistry', score: 85, fullMark: 150 },
  { subject: 'Biology', score: 90, fullMark: 150 },
];

function RoundedRadarChart() {
  return (
    <RadarChart outerRadius={90} width={500} height={500} data={radarData}>
      <PolarGrid />
      <PolarAngleAxis dataKey="subject" />
      <PolarRadiusAxis angle={30} domain={[0, 150]} />
      <Radar
        name="成绩"
        dataKey="score"
        stroke="#8884d8"
        fill="#8884d8"
        fillOpacity={0.6}
        strokeLinejoin="round"
        strokeLinecap="round"
      />
    </RadarChart>
  );
}

export default RoundedRadarChart;

• strokeLinejoin="round"：控制折线转角处的圆角效果
• strokeLinecap="round"：控制折线端点的圆角效果

方法二：自定义雷达图路径（灵活调整圆角大小） #

如果需要精细控制圆角弧度，可以自定义路径组件，通过SVG二次贝塞尔曲线实现：

import { RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis } from 'recharts';

const radarData = [
  { subject: 'Math', score: 120, fullMark: 150 },
  { subject: 'Chinese', score: 98, fullMark: 150 },
  { subject: 'English', score: 86, fullMark: 150 },
  { subject: 'Physics', score: 99, fullMark: 150 },
  { subject: 'Chemistry', score: 85, fullMark: 150 },
  { subject: 'Biology', score: 90, fullMark: 150 },
];

// 自定义带圆角的雷达图路径组件
const CustomRoundedRadar = (props) => {
  const { points } = props;
  const roundOffset = 12; // 圆角大小，数值越大弧度越明显

  let path = `M ${points[0].x},${points[0].y}`;
  // 绘制各段带圆角的路径
  for (let i = 1; i < points.length; i++) {
    const prev = points[i - 1];
    const curr = points[i];
    const distance = Math.sqrt(Math.pow(curr.x - prev.x, 2) + Math.pow(curr.y - prev.y, 2));
    const ratio = roundOffset / distance;
    const ctrl1X = prev.x + (curr.x - prev.x) * ratio;
    const ctrl1Y = prev.y + (curr.y - prev.y) * ratio;
    const ctrl2X = curr.x - (curr.x - prev.x) * ratio;
    const ctrl2Y = curr.y - (curr.y - prev.y) * ratio;

    path += ` Q ${ctrl1X},${ctrl1Y} ${ctrl2X},${ctrl2Y} L ${curr.x},${curr.y}`;
  }
  // 闭合路径，处理最后一段的圆角
  const lastPoint = points[points.length - 1];
  const firstPoint = points[0];
  const closeDistance = Math.sqrt(Math.pow(firstPoint.x - lastPoint.x, 2) + Math.pow(firstPoint.y - lastPoint.y, 2));
  const closeRatio = roundOffset / closeDistance;
  const closeCtrl1X = lastPoint.x + (firstPoint.x - lastPoint.x) * closeRatio;
  const closeCtrl1Y = lastPoint.y + (firstPoint.y - lastPoint.y) * closeRatio;
  const closeCtrl2X = firstPoint.x - (firstPoint.x - lastPoint.x) * closeRatio;
  const closeCtrl2Y = firstPoint.y - (firstPoint.y - lastPoint.y) * closeRatio;

  path += ` Q ${closeCtrl1X},${closeCtrl1Y} ${closeCtrl2X},${closeCtrl2Y} L ${firstPoint.x},${firstPoint.y} Z`;

  return (
    <path
      d={path}
      stroke="#8884d8"
      fill="#8884d8"
      fillOpacity={0.6}
    />
  );
};

function CustomRadarChart() {
  return (
    <RadarChart outerRadius={90} width={500} height={500} data={radarData}>
      <PolarGrid />
      <PolarAngleAxis dataKey="subject" />
      <PolarRadiusAxis angle={30} domain={[0, 150]} />
      <CustomRoundedRadar dataKey="score" />
    </RadarChart>
  );
}

export default CustomRadarChart;

修改roundOffset数值可以自由调整圆角的弧度大小，适配不同视觉需求。

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