Chart.js环形图如何基于当前值与最大值实现百分比展示？

当用Chart.js制作环形图展示进度时，常会遇到这个问题：比如当前值为1、最大值为2，想要环形图显示50%已完成、50%未完成，但直接设置data = [1, 2]的话，图表会显示33%和66.7%——这是因为Chart.js默认按数据总和的占比计算，1+2=3，1/3≈33%，2/3≈66.7%，不符合进度条的预期效果（比如完成2道共4道测验，需要呈现50%/50%的占比）。

解决方法很简单，调整数据数组的构成：
将数据设置为data = [currentValue, maxValue - currentValue];

这样数据总和等于最大值maxValue，currentValue的占比就是currentValue/maxValue，正好对应进度占比。比如：

• 当前值1、最大值2：data = [1, 1]，总和2，各占50%
• 当前值2、最大值4：data = [2, 2]，总和4，各占50%

下面是完整的代码示例：

// 配置示例：完成2道，共4道测验的进度环形图
const currentCompleted = 2;
const totalTasks = 4;

new Chart(document.getElementById('progressChart'), {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [currentCompleted, totalTasks - currentCompleted],
            backgroundColor: ['#2196F3', '#f0f0f0'] // 已完成/未完成的颜色
        }]
    },
    options: {
        cutout: '70%', // 调整环形的空心大小，更像进度条
        responsive: true
    }
});

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