Chart.js v3.60环形图tooltip标签末尾添加%符号的配置方法

解决方案 #

你当前使用的是Chart.js v3及以上版本，配置逻辑和v2不同，只需在tooltip的callbacks中添加label回调函数即可实现需求：

• 回调函数的context参数包含当前悬浮项的所有关联数据
• 直接取context.raw即可拿到当前扇形对应的原始数值，拼接%后返回即可

修改后的完整代码 #

const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [12, 19, 3, 5, 2],
            backgroundColor: [
                '#b59671',
                '#c7ba53',
                '#7da35a',
                '#4c77ba',
                '#000000'
            ],
            borderColor: [
                '#b59671',
                '#c7ba53',
                '#7da35a',
                '#4c77ba',
                '#000000'
            ],
            borderWidth: 1,
        }]
    },
    options: {
        cutout: 300,
        hoverOffset: 8,
        plugins: {
            tooltip: {
                displayColors: false,
                callbacks: {
                    label: function(context) {
                        return `${context.raw}%`;
                    }
                }
            }
        }
    }
});

拓展说明 #

如果后续你给data添加了labels配置，想要同时展示标签和带%的数值，可以将回调函数修改为：

label: function(context) {
    return `${context.label}：${context.raw}%`;
}

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