本文详解 chart.js 4 中如何完全隐藏 x 轴和 y 轴的坐标轴线（即基线），同时保持网格线可见；支持通过 display: false 精准控制轴线显隐，并提供透明化、颜色定制等进阶方案。
本文详解 chart.js 4 中如何完全隐藏 x 轴和 y 轴的坐标轴线（即基线），同时保持网格线可见；支持通过 display: false 精准控制轴线显隐，并提供透明化、颜色定制等进阶方案。
在 Chart.js 4 中，坐标轴（Axes）由多个视觉元素组成：轴线（axis line / base border）、网格线（grid lines）、刻度标签（tick labels） 和 刻度线（tick marks）。用户常误以为 grid.display: false 或 border.display: false 即可隐藏轴线，但实际上——轴线本身由 scales.{x/y}.display 控制，而 border 配置项在 Chart.js 4 中已被弃用或重命名，正确方式是使用 scales.{x/y}.border.display（需确保版本兼容）或更稳妥的 display: false。
✅ 正确做法：将 scales.x.display 和 scales.y.display 设为 false，即可彻底隐藏 X/Y 轴的基线（即图中从原点延伸出的粗黑横线/竖线），且不影响网格线显示——这正是问题中“保留网格线、仅移除轴线”的核心需求。
以下是优化后的完整配置示例（适配 Chart.js v4.4+）：
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
const MAINCHARTCANVAS = document.querySelector(".main-chart");
new Chart(MAINCHARTCANVAS, {
type: 'line',
data: {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [{
label: 'My First Dataset',
data: [7, 5, 7, 7, 8, 7, 4],
borderColor: "#4F3422",
tension: 0.4,
borderWidth: 7,
borderSkipped: true,
}]
},
options: {
scales: {
x: {
display: false, // ✅ 隐藏 X 轴基线（关键！）
grid: {
display: true, // 显式启用网格线（默认 true，但建议明确）
color: '#E8DDD9', // 网格线颜色
lineWidth: 1, // 可选：微调粗细
},
ticks: {
display: false // 隐藏 X 轴刻度标签（如 Mon/Tue 等），按需设置
}
},
y: {
display: false, // ✅ 隐藏 Y 轴基线（关键！）
beginAtZero: true,
grid: {
display: true,
color: '#E8DDD9',
lineWidth: 1
},
ticks: {
display: false // 隐藏 Y 轴数值标签（如 0/2/4...），保持简洁
}
}
},
plugins: {
legend: { display: false },
tooltip: { enabled: false }
},
responsive: true,
maintainAspectRatio: false,
elements: {
point: { radius: 3 }
}
}
});
? 关键说明与注意事项：
- scales.{x/y}.display: false 是隐藏轴线的唯一可靠方式，它会移除轴线本身及默认刻度线，但不干扰 grid 渲染；
- 不要依赖已废弃的 border.display 或拼写错误的 didplay（原文中存在此 typo）；Chart.js 4 的 border 配置需配合 display: false 使用，但 display: false 在 scale 级别已足够；
- 若需保留刻度标签（如星期名或数值），请将对应 ticks.display 设为 true，并用 ticks.color 控制字体颜色；
- 网格线颜色支持 CSS 颜色值（如 #E8DDD9）、RGBA（如 'rgba(232, 221, 217, 0.7)'）或渐变，实现柔和视觉效果；
- 如需进一步隐藏刻度线（小短线），添加 grid.drawTicks: false（注意：这是 grid 子属性，非 ticks 下的配置）。
? 进阶技巧：
若希望轴线“半透明”而非完全隐藏，可改用 border.color: 'transparent' + border.width: 1，但需确认 Chart.js 版本支持（v4.0+ 推荐优先使用 display: false 保证兼容性）。
通过上述配置，你将获得如预期所示的干净图表：无粗重坐标轴线，仅保留优雅的浅色网格线，数据焦点更集中，视觉层次更清晰。
