在 Chart.js v4.1.1 中，图例（legend）必须通过 plugins.legend 配置，而非顶层 legend 选项；旧版写法已废弃，直接导致 position 等属性失效。
在 chart.js v4.1.1 中，图例（legend）必须通过 `plugins.legend` 配置，而非顶层 `legend` 选项；旧版写法已废弃，直接导致 position 等属性失效。
Chart.js 自 v3 起彻底重构了插件系统，v4.x 版本延续并强化了这一设计：所有内置组件（如图例、标题、工具提示等）均统一归入 plugins 配置项下，不再支持顶层 legend、title 或 tooltip 等独立配置对象。若仍沿用 v2 的写法（例如直接写 legend: { position: 'right' }），Chart.js 将静默忽略这些配置，回退至默认行为——即图例显示在图表顶部（position: 'top'）。
✅ 正确配置方式（适用于 v4.1.1）：
const options = {
type: 'pie',
data: {
labels: _chartLabels,
datasets: [{
data: _chartData
}]
},
responsive: true,
// ✅ 关键：legend 必须放在 plugins 内部
plugins: {
legend: {
display: true, // 显式启用（默认为 true，但建议保留）
position: 'right', // 可选值：'top', 'bottom', 'left', 'right'
align: 'center' // 控制图例整体在容器内的垂直/水平对齐（配合 position 生效）
}
}
};
new Chart(projectChart, options);⚠️ 常见错误与注意事项：
-
重复或冲突配置：你原始代码中同时存在
legend: {...}和plugins: { legend: {...} }，且legend出现在options顶层两次（JavaScript 对象键会覆盖），这不仅无效，还可能引发混淆； -
align的作用范围：当position: 'right'时，align: 'center'表示图例垂直居中于图表右侧；若设为'start'或'end'，则分别对齐顶部或底部； -
响应式布局适配：
position: 'right'在小屏幕下可能导致空间不足，建议搭配layout.padding或启用responsive: true+maintainAspectRatio: false提升适应性； -
自定义图例样式：如需进一步定制（如修改字体、项间距、图标大小），可在
legend下添加labels配置对象，例如：labels: { padding: 20, font: { size: 14 }, usePointStyle: true }
? 总结：Chart.js v4 的配置范式是「插件驱动」——一切非核心绘图逻辑（图例、标题、缩放、注解等）都必须置于 plugins 下。牢记 plugins.legend 这一路径，即可精准控制图例位置与外观，避免陷入“配置不生效”的常见陷阱。
