本文详解如何在 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+ 版本，具备强稳定性与定制自由度，是构建专业数据看板时推荐的永久标签实践模式。
