如何使用Chart.js为极地区域图填充剩余区域的不同颜色/透明度

嘿，刚好我之前做过类似的需求，给你分享两种靠谱的实现方法，根据你的场景选就行～

方法一：双数据集叠加（简单直接） #

如果你的进度可以拆分成「已完成」和「剩余」两个部分，最省事的方法就是用两个数据集来叠加，分别设置它们的颜色和透明度。这样Chart.js会自动帮你渲染出两个区域，比例完全对应你的进度。

举个具体的代码例子，假设总进度是100，当前完成了60：

const ctx = document.getElementById('polarChart').getContext('2d');
new Chart(ctx, {
    type: 'polarArea',
    data: {
        labels: ['已完成', '剩余'], // 可以根据需求隐藏标签
        datasets: [{
            label: '进度统计',
            data: [60, 40], // 已完成 + 剩余 = 总进度
            backgroundColor: [
                'rgba(75, 192, 192, 0.7)', // 已完成区域的颜色（半透明）
                'rgba(201, 203, 207, 0.3)'  // 剩余区域的颜色（更浅的透明度）
            ],
            borderColor: [
                'rgba(75, 192, 192, 1)',
                'rgba(201, 203, 207, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            r: {
                beginAtZero: true,
                max: 100 // 必须设置为总进度，保证比例正确
            }
        },
        // 要是不想显示图例，可以加这个配置
        // plugins: { legend: { display: false } }
    }
});

这种方法的好处是不用额外写自定义逻辑，完全利用Chart.js原生的多数据集能力，颜色和透明度调整起来也特别灵活。

方法二：自定义绘制背景（单分类场景） #

如果你的需求是只显示一个「进度」标签，剩余区域作为背景存在，那可以用Chart.js的beforeDraw钩子，在进度图层下面绘制一个完整的极地区域当背景。

代码示例如下：

const ctx = document.getElementById('polarChart').getContext('2d');
new Chart(ctx, {
    type: 'polarArea',
    data: {
        labels: ['当前进度'],
        datasets: [{
            label: '已完成',
            data: [60],
            backgroundColor: 'rgba(75, 192, 192, 0.7)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            r: {
                beginAtZero: true,
                max: 100
            }
        },
        plugins: {
            beforeDraw: function(chart) {
                const ctx = chart.ctx;
                // 获取图表中心坐标和半径
                const centerX = chart.chartArea.left + (chart.chartArea.right - chart.chartArea.left)/2;
                const centerY = chart.chartArea.top + (chart.chartArea.bottom - chart.chartArea.top)/2;
                const radius = chart.chartArea.width / 2;

                // 绘制剩余区域的背景圆
                ctx.save();
                ctx.beginPath();
                ctx.moveTo(centerX, centerY);
                ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
                ctx.fillStyle = 'rgba(201, 203, 207, 0.3)'; // 剩余区域的颜色/透明度
                ctx.fill();
                ctx.restore();
            }
        }
    }
});

这种方法适合只需要突出显示「已完成进度」的场景，背景的颜色和透明度可以通过fillStyle随意调整。

小提示 #

• 透明度调整：直接修改rgba里的第四个数值（范围0-1），0是完全透明，1是完全不透明
• 隐藏图例：如果不需要显示「已完成/剩余」的标签，在options.plugins.legend里设置display: false即可
• 总进度适配：确保scales.r.max的值和你的总进度一致，这样比例才会准确

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