Chart.js v4.1.1 饼图图例位置设置无效问题求助

核心问题分析 #

你的代码存在两个关键问题：

• 重复定义了顶级legend配置，后面的配置会覆盖前面的，但这不是主要问题；
• Chart.js v3及以上版本已废弃顶级legend配置，所有图例相关设置必须放在plugins对象内部。你尝试过的plugins.legend写法是正确的，但被注释掉了，同时保留了无效的顶级legend配置，导致设置不生效。

修正后的代码 #

将你的options配置修改为以下内容，移除重复的顶级legend，启用plugins内的图例配置：

var options = {
    type: 'pie',
    data: {
        labels: _chartLabels,
        datasets: [{
            data: _chartData
        }]
    },
    responsive: true,
    plugins: {
        title: {
            display: true,
            text: 'Project Priority' // 注意：v3+版本标题也需要放在plugins内
        },
        legend: {
            display: true,
            position: 'right',
            align: 'center' // 配合position: 'right'，让图例垂直居中
        }
    }
};

额外注意事项 #

• 确认你的Chart.js版本：如果是v2版本，顶级legend配置是有效的，但v3+必须使用plugins.legend；
• 不要重复定义相同的配置项（比如你原来代码里的两个legend），JavaScript对象中重复的键会被最后一个覆盖；
• 饼图的图例位置设置为right时，align: 'center'可以让图例在垂直方向上居中对齐，提升视觉效果。

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