如何调整ChartJS中两个嵌套doughnut环形图的厚度至相同细窄效果

要让两个嵌套的doughnut环形图厚度一致，需要同时搭配全局cutout配置和每个数据集单独的weight、cutout配置，具体操作如下：

• 首先调整全局配置的cutout参数，控制整体环形区域的内留白大小，数值越大，整体环形越靠近画布边缘
• 给两个环形对应的dataset设置相同的weight值，该参数用于分配环形区域的宽度占比，数值相等时两个环会平分可用的环形宽度，自然厚度一致
• 单独给每个dataset设置cutout参数，内层环的cutout数值要大于外层环，以此控制两个环之间的空隙大小

示例配置参考：

全局配置 #

const options = {
  responsive: true,
  maintainAspectRatio: false,
  // 全局内切割比例，控制整体环形的基础位置
  cutout: "70%",
  plugins: {
    legend: {
      display: false,
    },
  },
};

数据集配置 #

const data = {
  datasets: [
    // 外层环形数据集
    {
      data: [30, 70],
      backgroundColor: ["#FF5252", "#EEEEEE"],
      borderWidth: 0,
      // 两个数据集weight值保持一致
      weight: 1,
      // 外层环切割比例
      cutout: "75%",
    },
    // 内层环形数据集
    {
      data: [60, 40],
      backgroundColor: ["#4CAF50", "#EEEEEE"],
      borderWidth: 0,
      // 和外层weight值相同，保证厚度一致
      weight: 1,
      // 内层环切割比例大于外层，留出环间空隙
      cutout: "85%",
    },
  ],
};

你可以根据自己的设计需求调整三个cutout的数值，只要保证两个dataset的weight相等，就能实现厚度一致的细窄嵌套环形效果。

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