本文详解如何通过配置 datalabels 插件彻底禁用 react-chartjs-2 中 Line 图表的数据点（data point）标签，避免冗余文字干扰视觉焦点。
本文详解如何通过配置 `datalabels` 插件彻底禁用 react-chartjs-2 中 line 图表的数据点（data point）标签，避免冗余文字干扰视觉焦点。
在使用 react-chartjs-2 渲染折线图（Line 组件）时，有时图表会意外显示每个数据点的数值标签（如 0.58、-0.59），这并非由 elements.point 或 pointRadius 控制，而是由独立的第三方插件 chartjs-plugin-datalabels 渲染的——该插件常被预装或自动引入（尤其在较新版本的 chart.js 生态中）。
要彻底隐藏这些标签，关键在于显式禁用 datalabels 插件，而非调整点的大小或颜色。只需在 options.plugins 中添加如下配置：
const chartOptions = {
responsive: true,
plugins: {
legend: {
position: "top" as const,
},
title: {
display: false,
},
// ? 核心配置：禁用数据点标签
datalabels: {
display: false,
},
},
elements: {
point: {
radius: 2,
},
},
};
⚠️ 注意事项：
- 确保项目已安装 chartjs-plugin-datalabels（即使不主动使用，某些构建环境可能默认加载）。若未安装却启用该配置，通常无副作用；但若插件未注册，display: false 仍安全有效。
- 若你曾手动注册 ChartDataLabels 插件（例如 Chart.register(ChartDataLabels)），此配置依然生效。
- 不要误将 pointRadius: 0 或 radius: 0 当作解决方案——它仅隐藏点本身，不影响标签显示；标签仍可能悬浮在坐标位置。
- 如需条件性显示（如仅在 hover 时显示），可改用 display: context => context.hovered，但本场景推荐直接设为 false。
最后验证：结合你提供的 chartData 和上述 chartOptions，渲染后的折线图将保留所有交互与样式（线条、颜色、平滑度等），唯独不再出现任何数据点旁的数字标签，图表更简洁、专业，符合数据可视化最佳实践。
