求助：如何使用Chart.js实现三层嵌套环形图

针对你想要实现的多层半环形图，原代码存在几个关键问题：

• 采用[数值, 100-数值]加透明色的方式会导致环形重叠，显示混乱
• 新版本Chart.js已弃用cutoutPercentage，需改用cutout配置项
• 未设置多层环形的分层逻辑，无法形成目标的层级视觉效果

以下是修正后的完整代码，可实现你需要的半环形分层效果：

var data = {
  labels: ["Profit", "Income", "Loss"],
  datasets: [
    {
      data: [40, 60], // 40%为显示段，60%为空白段
      backgroundColor: ["lightgreen", "transparent"],
      borderWidth: 20, // 控制环形厚度
      hoverOffset: 0
    },
    {
      data: [25, 75],
      backgroundColor: ["lightcoral", "transparent"],
      borderWidth: 20,
      hoverOffset: 0
    },
    {
      data: [10, 90],
      backgroundColor: ["lightblue", "transparent"],
      borderWidth: 20,
      hoverOffset: 0
    }
  ]
};

var options = {
  cutout: "80%", // 控制内圈大小，替代旧版cutoutPercentage
  circumference: Math.PI, // 设置为半环形
  rotation: -Math.PI / 2, // 环形从顶部位置开始绘制
  animation: { animateRotate: true, animateScale: false },
  plugins: {
    legend: {
      position: 'bottom',
      labels: {
        padding: 20,
        usePointStyle: true
      }
    },
    datalabels: { display: false }
  },
  scales: {
    x: { display: false },
    y: { display: false }
  }
};

var ctx = document.getElementById("multiDoughnutChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: "doughnut",
  data: data,
  options: options
});

关键调整说明 #

• 每个数据集通过borderWidth统一控制环形厚度，确保分层显示的一致性
• 用cutout替代cutoutPercentage适配Chart.js新版本API
• 配置图例位置和样式，提升图表可读性
• 隐藏冗余的坐标轴刻度，优化视觉简洁度

如果需要让多层环形产生错落间距，可给对应数据集添加offset属性，例如：

// 给中间数据集添加偏移
{
  data: [25, 75],
  backgroundColor: ["lightcoral", "transparent"],
  borderWidth: 20,
  offset: 5,
  hoverOffset: 0
}

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