在 Chart.js 4 中，可通过 scales.{x/y}.display: false 彻底隐藏坐标轴线，同时保留网格线；若需保留刻度标签或调整颜色，则需分别配置 grid、ticks 和 border 子选项。
在 chart.js 4 中，可通过 `scales.{x/y}.display: false` 彻底隐藏坐标轴线，同时保留网格线；若需保留刻度标签或调整颜色，则需分别配置 `grid`、`ticks` 和 `border` 子选项。
在使用 Chart.js 4 绘制折线图时，常需移除默认的 X/Y 坐标轴线（即两条粗边框），但又希望保留网格线以增强数据可读性——这正是许多设计师和开发者的核心需求。关键在于：display: false 作用于整个坐标轴（含轴线、刻度、标签），而轴线样式控制需通过 border 和 grid 独立配置。
✅ 正确做法：完全隐藏坐标轴线（推荐）
只需将 scales.x.display 和 scales.y.display 设为 false，即可移除所有轴线、刻度及标签，但默认网格线仍会显示（因 grid.display 默认为 true）：
options: {
scales: {
x: {
display: false // 隐藏整个 X 轴（含轴线、刻度、标签）
},
y: {
display: false // 隐藏整个 Y 轴
}
}
}
⚠️ 注意：border.display: false 或 drawBorder: false 在 Chart.js 4 中已弃用，直接使用 display: false 即可。
? 进阶定制：保留网格/刻度，仅隐藏轴线
若需保留网格线和刻度标签，仅隐藏坐标轴线本身（即底部和左侧的粗边框），应显式关闭 border 并精细控制 grid 和 ticks：
scales: {
x: {
border: { display: false }, // 关键：隐藏 X 轴线（不隐藏网格！）
grid: {
display: true, // 确保网格可见
color: 'rgba(232, 221, 217, 0.6)', // 自定义网格颜色
lineWidth: 1.5
},
ticks: {
color: '#666', // 刻度文字颜色
font: { size: 12 }
}
},
y: {
border: { display: false }, // 隐藏 Y 轴线
grid: {
color: 'rgba(232, 221, 217, 0.6)',
lineWidth: 1.5,
drawTicks: false // 隐藏刻度短线（"-" 符号）
},
ticks: {
color: '#666',
padding: 10
}
}
}
? 常见误区与修复
- ❌ 错误写法：x.border.didplay: false（拼写错误，且 didplay 无效）
- ❌ 错误写法：y.drawBorder: false（Chart.js 4 已移除该属性）
- ✅ 正确路径：所有轴线控制统一通过 border.display（布尔值）实现
- ✅ 网格透明化：使用 rgba(r,g,b,a) 格式，如 'rgba(0,0,0,0)' 实现完全透明
? 完整示例（适配你的原始代码）
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,
pointRadius: 3
}]
},
options: {
scales: {
x: {
display: false, // ✅ 移除 X 轴线及标签
grid: {
display: true,
color: 'rgba(232, 221, 217, 0.6)',
lineWidth: 1.2
}
},
y: {
display: false, // ✅ 移除 Y 轴线及标签
beginAtZero: true,
grid: {
display: true,
color: 'rgba(232, 221, 217, 0.6)',
lineWidth: 1.2,
drawTicks: false
},
ticks: {
display: true, // 若需显示数值标签，设为 true；否则 false
color: 'transparent' // 或设为 '#999' 以保持可读性
}
}
},
plugins: {
legend: { display: false },
tooltip: { enabled: false }
},
responsive: true,
maintainAspectRatio: false
}
});
通过以上配置，你将获得如预期所示的「无轴线、有网格」清爽图表效果——既满足视觉简洁性，又不失数据引导功能。
