Chart.js 3 实现圆角边缘doughnut chart的适配方法

以下是适配Chart.js 3版本的可运行代码，已修复v2到v3版本的所有破坏性变更兼容问题：

class RoundedDoughnutController extends Chart.DoughnutController {
  draw(ease) {
    const ctx = this.chart.ctx;
    const easingDecimal = ease || 1;
    const arcs = this.getMeta().data;
    
    arcs.forEach((arc, i) => {
      arc.transition(easingDecimal).draw();
      
      const prevArc = arcs[i === 0 ? arcs.length - 1 : i - 1];
      const prevColor = prevArc.options.backgroundColor;

      const radius = (arc.outerRadius + arc.innerRadius) / 2;
      const thickness = (arc.outerRadius - arc.innerRadius) / 2;
      const startAngle = Math.PI - arc.startAngle - Math.PI / 2;
      const endAngle = Math.PI - arc.endAngle - Math.PI / 2;

      ctx.save();
      ctx.translate(arc.x, arc.y);

      ctx.fillStyle = i === 0 ? arc.options.backgroundColor : prevColor;
      ctx.beginPath();
      ctx.arc(radius * Math.sin(startAngle), radius * Math.cos(startAngle), thickness, 0, 2 * Math.PI);
      ctx.fill();

      ctx.fillStyle = arc.options.backgroundColor;
      ctx.beginPath();
      ctx.arc(radius * Math.sin(endAngle), radius * Math.cos(endAngle), thickness, 0, 2 * Math.PI);
      ctx.fill();

      ctx.restore();
    });
  }
}
RoundedDoughnutController.id = 'roundedDoughnut';
RoundedDoughnutController.defaults = Chart.DoughnutController.defaults;
Chart.register(RoundedDoughnutController);

// 图表初始化
new Chart(document.getElementById('usersChart'), {
  type: 'roundedDoughnut',
  data: {
    datasets: [{
      data: [40, 20, 20, 20],
      backgroundColor: ['#e77099', '#5da4e7', '#8f75e7', '#8fe768'],
      borderWidth: 0
    }]
  },
  options: {
    cutout: '70%'
  }
});

核心适配修改点 #

• 自定义控制器改用ES6类继承Chart.DoughnutController，通过官方Chart.register方法注册，无需手动克隆默认配置
• 移除v2版本废弃的_view私有属性依赖，圆弧的半径、角度、坐标、背景色等参数直接从元素实例和options属性读取
• 原v2配置项cutoutPercentage替换为v3标准的cutout配置，支持百分比字符串或0-1区间数值
• 替换原Chart内置的each遍历方法为原生forEach，减少框架API依赖
• 圆角大小自动匹配环形图厚度，无需额外手动调整参数，支持所有原生环形图的动画、图例、提示框等默认功能

内容的提问来源于stack exchange，提问作者Daniel.V