如何在React中使用reactchartjs-2和chart.js绘制带圆角的环形图

嘿，我来帮你搞定这个带圆角的环形图！其实从Chart.js v3版本开始，官方就支持了圆角配置，结合react-chartjs-2的封装，实现起来非常顺畅，我给你一步步拆解：

第一步：安装依赖 #

首先确保你安装了对应版本的依赖，Chart.js v3+和react-chartjs-2是配套的，执行以下命令：

npm install chart.js react-chartjs-2
# 或者用yarn
yarn add chart.js react-chartjs-2

第二步：编写图表组件 #

接下来是核心的组件代码，我会把关键部分标出来：

import React from 'react';
import { Doughnut } from 'react-chartjs-2';
import { Chart, ArcElement, Tooltip, Legend } from 'chart.js';

// 必须注册这些组件！Chart.js v3采用模块化设计，不注册的话会渲染失败
Chart.register(ArcElement, Tooltip, Legend);

const RoundedDoughnutChart = () => {
  // 图表数据
  const data = {
    labels: ['红色', '蓝色', '黄色'],
    datasets: [
      {
        data: [30, 50, 20],
        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
        borderColor: '#ffffff',
        borderWidth: 2,
        // 👉 核心：设置环形图的圆角，数值越大圆角越明显
        borderRadius: 10,
        // 如果你想给不同分段设置不同圆角，可以用数组：borderRadius: [20, 10, 5]
        // 甚至可以分别控制内外侧圆角：borderRadius: { outer: 10, inner: 5 }
      },
    ],
  };

  // 图表配置选项
  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: 'bottom', // 图例位置
      },
      tooltip: {
        // 自定义tooltip显示内容
        callbacks: {
          label: (context) => `${context.label}: ${context.parsed}%`,
        },
      },
    },
    // 设置环形图的空心大小，0是饼图，100是完全空心，这里用70%更像环形图
    cutout: '70%',
  };

  return (
    <div style={{ width: '300px', height: '300px' }}>
      <Doughnut data={data} options={options} />
    </div>
  );
};

export default RoundedDoughnutChart;

关键注意事项 #

• 版本要求：一定要用Chart.js v3及以上版本，borderRadius属性是v3才新增的，旧版本不支持这个特性
• 组件注册：别忘了注册ArcElement，它是绘制环形/饼图的核心元素，没注册的话圆角配置会不生效
• 精细控制：如果需要更定制化的圆角，比如外侧圆角大、内侧圆角小，可以用对象形式的borderRadius: { outer: 12, inner: 4 }，完全满足你的设计需求

这样就能得到你想要的带圆角边缘的环形图啦！

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