Chart.js 3.x 版本中图例默认启用但可能因插件未注册而不可见，需显式导入并注册 Legend 插件，或使用 chart.js/auto 全量导入来自动注册所有内置组件。
chart.js 3.x 版本中图例默认启用但可能因插件未注册而不可见，需显式导入并注册 legend 插件，或使用 `chart.js/auto` 全量导入来自动注册所有内置组件。
在 Chart.js 3.x 及更高版本中，为实现模块化与体积优化，默认采用“按需导入”机制——这意味着核心图表类（如 Chart）不再自动包含图例（Legend）、标题（Title）、数据标签（DataLabels）等插件。即使你在 options.legend 中设置了 { display: true }，若 Legend 插件未被注册，图例将完全不会渲染，且控制台通常也不会报错，导致排查困难。
✅ 正确注册图例插件的两种方式
方式一：显式导入并注册 Legend（推荐用于生产环境）
import { Chart, Legend } from 'chart.js';
// 必须手动注册，否则 legend 不生效
Chart.register(Legend);✅ 优势：精准控制依赖，避免打包冗余代码；适合已使用 Tree-shaking 的现代构建工具（如 Vite、Webpack 5+）。
BJXSHOP网上购物系统 - 书店版下载BJXSHOP购物管理系统是一个功能完善、展示信息丰富的电子商店销售平台；针对企业与个人的网上销售系统；开放式远程商店管理；完善的订单管理、销售统计、结算系统；强力搜索引擎支持；提供网上多种在线支付方式解决方案；强大的技术应用能力和网络安全系统 BJXSHOP网上购物系统 - 书店版，它具备其他通用购物系统不同的功能，有针对图书销售而进行开发的一个电子商店销售平台，如图书ISBN，图书目录
方式二：使用 chart.js/auto 全量自动注册（适合快速开发/调试）
import Chart from 'chart.js/auto'; // 自动导入并注册所有内置插件（Legend、Title、Tooltip、Colors 等）
✅ 优势：开箱即用，无需记忆插件名；⚠️ 注意：会增加约 10–15 KB 的打包体积（gzipped 后约 4–6 KB），不建议长期用于对性能敏感的生产项目。
? 修正后的完整示例（基于方式一）
import { Chart, Legend, Tooltip, Title } from 'chart.js';
// 注册必需插件（Legend 是图例必需，Tooltip 和 Title 可按需添加）
Chart.register(Legend, Tooltip, Title);
const data = {
datasets: [{
data: [successfulBuildsCount, failureBuildsCount],
backgroundColor: ['green', 'red'],
borderColor: '#fff',
}],
labels: ['Successes', 'Failures'] // ⚠️ 注意：labels 应置于 data 根对象下，而非 dataset 内！
};
const options = {
responsive: true,
plugins: {
legend: { display: true, position: 'right' }, // ✅ 使用 plugins.legend（v3+ 新语法）
title: { display: true, text: 'Build Status Distribution' },
// 若使用 chartjs-plugin-datalabels，请确保也已注册该插件
}
};
const ctx = document.getElementById('chartContainer').getContext('2d');
new Chart(ctx, {
type: 'doughnut',
data,
options
});⚠️ 关键注意事项
- 配置路径变更：Chart.js 3+ 中，图例配置已从旧版 options.legend 迁移至 options.plugins.legend，直接写 legend: { display: true } 在顶层 options 下会被忽略。
- labels 位置错误：你原代码中将 labels 放在 dataset 内是无效的；饼图/环形图的标签必须定义在 data.labels（即 data 对象的顶层属性）。
-
插件冲突风险：若同时引入第三方插件（如 chartjs-plugin-datalabels），需单独导入并注册，例如：
import { DataLabelsPlugin } from 'chartjs-plugin-datalabels'; Chart.register(DataLabelsPlugin);
✅ 总结
图例不可见的根本原因不是配置错误，而是插件缺失注册。牢记 Chart.js 3.x 的设计哲学：“导入即注册，未注册即不可用”。优先采用显式注册（Chart.register(Legend)），既保障功能可用性，又保持构建产物精简可控。调试时可临时切换为 chart.js/auto 快速验证问题是否源于插件注册环节。
