Chart.js Doughnut Chart问题：无法正确实现数据与100%的对比展示

问题分析 #

当前代码中每个数据集的data设置为[40, 100]这类格式，Chart.js会按照数据总和计算各部分占比，比如第一个数据集总和为140，40对应的占比是40/140≈28.57%，而非预期的40%，这直接导致图表显示不符合需求。

预期效果为：每个环形段展示实际数据占100%的比例，剩余部分用灰色填充至100%，通过多层环形嵌套呈现多组对比数据。

解决方案 #

将每个数据集的data调整为[实际数值, 100-实际数值]，确保每组数据总和为100，让Chart.js能正确渲染出对应100%的占比。原有图例、tooltip等配置可保留，仅修改数据部分即可。

修改后的完整代码 #

HTML部分 #

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<canvas id="multiDoughnutChart" style="max-height: 200px"></canvas>

JavaScript部分 #

new Chart('multiDoughnutChart', {
  type: "doughnut",
  data: {
    labels: ['Profit', 'Income', 'Loss'],
    datasets: [{
        // 40%占比，剩余60%用灰色填充
        data: [40, 60],
        backgroundColor: ['lightgreen', '#EFEFEF'],
        borderWidth: 10,
        borderRadius: [10, 0]
      },
      {
        // 25%占比，剩余75%用灰色填充
        data: [25, 75],
        backgroundColor: ['lightcoral', '#EFEFEF'],
        borderWidth: 10,
        borderRadius: [10, 0]
      },
      {
        // 50%占比，剩余50%用灰色填充
        data: [50, 50],
        backgroundColor: ['lightblue', '#EFEFEF'],
        borderWidth: 10,
        borderRadius: [10, 0]
      }
    ]
  },
  options: {
    cutout: '30%',
    hover: {
      mode: null
    },
    plugins: {
      legend: {
        position: 'bottom',
        labels: {
          generateLabels: chart => chart.data.labels.map((label, i) => ({
            text: label,
            idx: i,
            fillStyle: chart.data.datasets[i].backgroundColor[0],
            strokeStyle: '#fff',
            hidden: !chart.isDatasetVisible(i)
          }))
        },
        onClick: (event, legendItem, legend) => {
          legend.chart.getDatasetMeta(legendItem.idx).hidden = legend.chart.isDatasetVisible(legendItem.idx);
          legend.chart.update();
        }
      },
      tooltip: {
        filter: tooltipItem => tooltipItem.dataIndex == 0,
        callbacks: {
          label: ctx => ctx.raw + '%',
          labelColor: ctx => ({
            backgroundColor: ['lightgreen', 'lightcoral', 'lightblue'][ctx.datasetIndex],
            borderWidth: 0,
          })
        }
      }
    }
  }
});

关键说明 #

• 数据逻辑修正：把每个数据集的第二个值从100改为100-实际数值，保证每组数据总和为100，让实际数值的占比直接对应其百分比。
• 原有配置兼容：图例自定义点击切换、tooltip过滤显示等功能无需改动，可正常配合修正后的数据工作。

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