Chart.js 图表坐标轴边框彻底隐藏指南

在 chart.js 中，即使关闭网格线和边框显示，y 轴本身仍会默认渲染一条垂直轴线；只需将 `scales.y.display` 设为 `false` 即可完全移除该残留边框。

当你使用 Chart.js 创建无边框图表（如简洁的数据看板或嵌入式轻量图表）时，常会发现：尽管已设置 grid.display: false 和 showborder: false，Y 轴方向仍残留一条细长的灰色竖直线——这并非网格线，而是 Y 轴自身的坐标轴线（axis line），它由 Chart.js 默认启用，独立于网格配置。

要彻底隐藏它，关键在于显式禁用整个 Y 轴的渲染，而非仅调整其子项。正确做法是：

scales: {   x: {     grid: { display: false },     ticks: {       color: '#2D4059',       font: { size: 14, family: 'Lexend-SemiBold' }     }   },   y: {     display: false, // ✅ 核心修复：禁用整个 Y 轴（含轴线、刻度、标签）     grid: { display: false }, // 此处可省略，因 y 轴已整体隐藏     ticks: { display: false }   } }

⚠️ 注意：y.display: false 会同时隐藏 Y 轴线、刻度线、刻度文字及标题。若你仅需隐藏轴线但保留刻度（例如带横向参考线的极简设计），则应改用：y: { border: { display: false }, // ✅ 仅隐藏轴线（v4.4+ / v5+ 推荐写法） grid: { display: false }, ticks: { … } }——但需确认 Chart.js 版本：border.display 在 v3.x 中不被支持，v4.4+ 及 v5.x 才正式引入该配置项。本文示例基于广泛兼容的 v3.x（主流 LTS 版本），故推荐 display: false 方案。

此外，原配置中 legend 与 plugins.legend 并存属于冗余写法（v3.7+ 后 legend 已统一归入 plugins），建议精简为：

plugins: {   legend: { display: false },   datalabels: {     anchor: 'end',     align: 'top',     color: '#2D4059',     font: { size: 14, family: 'Lexend-SemiBold' }   } }

总结：Chart.js 的“顽固边框”本质是未被关闭的坐标轴容器本身。牢记——scales.{axis}.display: false 是清除该轴全部视觉元素（含边框）最直接、最可靠的方式，无需额外 hack 或 css 覆盖。