在 Chart.js v4.1.1 中，图例位置必须通过 plugins.legend 配置项设置，且需置于顶层 options 对象内；旧版的顶层 legend 属性已废弃，直接定义将被忽略。
在 chart.js v4.1.1 中，图例位置必须通过 `plugins.legend` 配置项设置，且需置于顶层 `options` 对象内；旧版的顶层 `legend` 属性已废弃，直接定义将被忽略。
Chart.js 自 v3 起全面重构插件系统，v4.x 版本延续该设计：所有内置功能（如图例、标题、工具提示等）均作为插件统一管理，不再支持顶层 legend、title 等独立配置对象。若仍沿用旧写法（如 legend: { position: 'right' }），配置将被静默忽略，默认显示在图表顶部。
✅ 正确配置方式（适用于 v4.1.1）：
const options = {
type: 'pie',
data: {
labels: _chartLabels,
datasets: [{
data: _chartData
}]
},
responsive: true,
// ✅ 关键：plugins 必须是顶层属性，且 legend 配置嵌套其中
plugins: {
legend: {
display: true, // 显式启用（默认为 true，但建议保留）
position: 'right', // 可选值：'top' | 'bottom' | 'left' | 'right'
align: 'center' // 控制图例在指定区域内的对齐方式（仅对 left/right 有效）
}
}
};
new Chart(projectChart, options);
⚠️ 常见错误与注意事项：
-
重复或错误嵌套：如示例中曾将
options再次作为子属性（options: { plugins: {...} }），会导致整个配置失效——options是顶层对象本身，不可嵌套。 -
拼写与大小写敏感：
plugins必须全小写，legend不可写作Legend或LEGEND。 -
align的作用范围：当position: 'right'时，align: 'center'使图例垂直居中；若设为'start'或'end'，则分别对齐顶部或底部。该选项对position: 'top'/'bottom'同样生效（控制水平对齐）。 -
响应式布局兼容性：启用
responsive: true时，position: 'right'在窄屏下可能自动回退为'top'，可通过maintainAspectRatio: false或 CSS 容器最小宽度缓解。
? 小技巧：若需进一步自定义图例样式（如修改字体、图标尺寸、点击行为），可结合 labels 子配置项，例如：
plugins: {
legend: {
position: 'right',
labels: {
padding: 20,
font: { size: 14 },
usePointStyle: true // 用圆点替代默认方块图标
}
}
}
遵循插件化配置规范，即可精准控制图例位置与外观，避免因版本迁移导致的“配置不生效”问题。
