如何在Angular的Chart.js 4中实现环形图分段圆角分隔

要将现有多层环形图修改为带分段圆角和分隔的样式，无需额外依赖SVG或jQuery，直接通过Chart.js 4的内置配置即可实现，核心修改如下：

关键配置调整点 #

• 给每个数据集添加borderRadius实现分段圆角
• 配置borderColor（匹配页面背景色）和borderWidth实现分段间的分隔间隙
• 为不同层级的数据集设置差异化的radius和cutout，构建嵌套环形结构

修改后的完整配置代码 #

var config: any = {
  type: 'doughnut',
  data: {
    datasets: [{
      label: 'Dataset 1',
      data: [50, 50],
      backgroundColor: ["#ff3333", "#660000"],
      hoverBackgroundColor: ["#ff3333", "#660000"],
      borderColor: '#ffffff',
      hoverBorderColor: '#ffffff',
      borderWidth: 2,
      borderRadius: 8,
      radius: '90%',
      cutout: '70%',
      datalabels: {
        display: false
      }
    }, {
      label: 'Dataset 2',
      data: [70, 30],
      backgroundColor: ["#00ff00", "#003300"],
      hoverBackgroundColor: ["#00ff00", "#003300"],
      borderColor: '#ffffff',
      hoverBorderColor: '#ffffff',
      borderWidth: 2,
      borderRadius: 8,
      radius: '70%',
      cutout: '50%',
      datalabels: {
        display: false
      }
    }, {
      label: 'Dataset 3',
      data: [40, 60],
      labels: ['green', 'yellow'],
      backgroundColor: ["#1991EB", "#001f4d"],
      hoverBackgroundColor: ["#1991EB", "#001a4d"],
      borderColor: '#ffffff',
      hoverBorderColor: '#ffffff',
      borderWidth: 2,
      borderRadius: 8,
      radius: '50%',
      cutout: '30%',
      datalabels: {
        display: false
      }
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        display: false
      }
    }
  }
};

配置说明 #

1. 分段圆角：borderRadius: 8控制圆角大小，数值越大圆角越明显，可根据视觉需求调整
2. 分段分隔：borderWidth: 2设置分隔间隙宽度，borderColor设为页面背景色（示例为白色），让分段间形成清晰的分隔线
3. 多层结构：通过radius（环形外半径）和cutout（环形内半径）的百分比设置，让三个数据集形成从外到内的嵌套环形，百分比基于图表容器的尺寸自适应
4. 简化配置：移除了原代码中无效的hoverBackground等配置，统一调整border相关配置实现分隔效果

内容的提问来源于stack exchange，提问作者Prince Bhati