本文详解如何在 chart.js 饼图中让数据标签（如“online: 8%”）始终显示、不依赖悬停，通过禁用内置 datalabels 插件 + 自定义绝对定位标签容器实现高可控性、响应式、样式一致的永久标签效果。
本文详解如何在 chart.js 饼图中让数据标签（如“online: 8%”）始终显示、不依赖悬停，通过禁用内置 datalabels 插件 + 自定义绝对定位标签容器实现高可控性、响应式、样式一致的永久标签效果。
在 Chart.js 中，默认的 datalabels 插件（需额外引入）虽支持常驻标签，但其定位精度受限于扇形弧度与半径计算，在小尺寸或比例悬殊的饼图中易重叠、偏移或截断；而原生 plugins.datalabels 配置（如 display: true）在某些版本中仍可能受交互逻辑影响，无法真正“永久”显示。更可靠、更灵活的方案是完全绕过插件，采用 HTML + CSS 自定义标签容器——将标签作为独立 dom 元素叠加在 canvas 上，由开发者全权控制内容、样式与位置。
以下是一个生产就绪的实现示例，包含颜色标识块、文本标签、动态尺寸适配及响应式重定位：
<div style="position: relative; width: 400px; height: 400px; margin: 20px auto;"> <canvas id="pieChart"></canvas> <div id="labels-container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; pointer-events: none;"> <!-- 颜色标识列 --> <div style="display: flex; flex-direction: column; align-items: flex-start; margin-right: 8px;"> <div style="background-color: rgba(71, 190, 125, 1); width: 12px; height: 12px; border-radius: 2px;"></div> <div style="background-color: rgba(241, 65, 108, 1); width: 12px; height: 12px; border-radius: 2px; margin-top: 6px;"></div> </div> <!-- 文本标签列 --> <div style="display: flex; flex-direction: column; align-items: flex-start; font-family: -apple-system, BlinkMacSystemFont, 'Segoe ui', Roboto, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5;"> <div style="color: #333;">Online: 8%</div> <div style="color: #333; margin-top: 6px;">Offline: 2%</div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> const canvas = document.getElementById('pieChart'); const labelsContainer = document.getElementById('labels-container'); const pieChart = new Chart(canvas, { type: 'pie', data: { labels: ['Online', 'Offline'], datasets: [{ data: [8, 2], backgroundColor: [ 'rgba(71, 190, 125, 1)', // Online green 'rgba(241, 65, 108, 1)' // Offline red ], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, // 关闭默认图例 datalabels: { display: false } // 明确禁用 datalabels 插件（即使未引入也建议声明） } } }); // 动态同步容器尺寸，确保覆盖 Canvas function syncLabelsContainer() { const rect = canvas.getBoundingClientRect(); labelsContainer.style.width = `${rect.width}px`; labelsContainer.style.height = `${rect.height}px`; } // 初始化 + 监听窗口缩放 syncLabelsContainer(); window.addEventListener('resize', syncLabelsContainer); </script>✅ 关键设计说明：
- pointer-events: none 应用于 #labels-container，确保鼠标事件（如 hover、click）可穿透至底层 Canvas，不影响图表交互；
- 使用 flexbox 布局实现左右对齐的色块+文本结构，语义清晰、易于扩展（如增加第三类数据）；
- 标签字体选用系统默认无衬线体，字号 14px、行高 1.5，兼顾可读性与视觉平衡；
- border-radius: 2px 赋予色块轻微圆角，提升 UI 精致感；
- syncLabelsContainer() 函数基于 getBoundingClientRect() 获取实时渲染尺寸，比 offsetWidth/Height 更准确（尤其在 CSS 缩放或响应式布局下）。
⚠️ 注意事项：
- 若图表启用 responsive: true 且容器宽高非固定（如 width: 100%），请确保父级有明确尺寸约束，否则 getBoundingClientRect() 可能返回意外值；
- 如需支持深色模式，建议为文本色使用 color-scheme: light dark 兼容写法，或通过 @media (prefers-color-scheme: dark) 动态切换；
- 多数据项场景下，建议将标签生成逻辑封装为函数，根据 chart.data.labels 和 chart.data.datasets[0].data 动态渲染 DOM，避免硬编码。
该方案不依赖第三方插件，兼容所有 Chart.js v3+ 版本，具备强稳定性与定制自由度，是构建专业数据看板时推荐的永久标签实践模式。