Chart.js v4.1.1 中正确配置图例位置的完整指南-js教程-PHP中文网

Chart.js v4.1.1 中正确配置图例位置的完整指南

在 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);

⚠️ 常见错误与注意事项：

Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

重复或冲突配置：你原始代码中同时存在 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
}
```