本文详解 chart.js 4 中彻底隐藏 x/y 坐标轴线（非网格线）的方法，并支持透明化、颜色定制及网格保留，满足简洁图表设计需求。

本文详解 chart.js 4 中彻底隐藏 x/y 坐标轴线（非网格线）的方法，并支持透明化、颜色定制及网格保留，满足简洁图表设计需求。

在 Chart.js 4 中，坐标轴（x/y）默认包含两部分：轴线（axis line） 和 网格线（grid lines）。用户常误将二者混淆——例如希望保留浅色网格（如 #E8DDD9），却移除底部/左侧那条粗重的基准轴线（即“base border”）。关键在于：display: false 控制整个轴的可见性（含轴线、刻度标签、刻度线），而 border.display: false 才精准控制轴线本身。

✅ 正确做法（推荐）：
仅隐藏轴线，保留网格与刻度（可选）：

options: {
  scales: {
    x: {
      border: {
        display: false // ✅ 隐藏 X 轴线（底部横线）
      },
      grid: {
        display: true,  // ✅ 保留垂直网格线（默认 true）
        color: '#E8DDD9',
        lineWidth: 1
      },
      ticks: {
        display: true   // 可设 false 隐藏刻度标签（如 "Mon", "Tue"）
      }
    },
    y: {
      border: {
        display: false // ✅ 隐藏 Y 轴线（左侧竖线）
      },
      grid: {
        display: true,
        color: '#E8DDD9',
        lineWidth: 1
      },
      ticks: {
        display: true   // 可设 false 隐藏数值标签
      }
    }
  }
}

⚠️ 注意事项：

• ❌ x.display: false 或 y.display: false 会完全隐藏该轴所有元素（包括网格、刻度、标签），不符合“仅去轴线、留网格”的需求；
• ❌ border.didplay 是拼写错误（应为 display），且 Chart.js 4 中 border 是对象，需嵌套配置；
• ✅ grid.drawTicks: false 可隐藏刻度短线（即刻度与轴线之间的短横线），避免视觉干扰；
• ✅ 若需“视觉透明”，可设 border.color: 'transparent' 或 border.width: 0，但 display: false 更语义清晰、性能更优。

? 完整示例（适配你的原始代码）：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

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: {
        border: { display: false }, // ← 关键：隐藏 X 轴线
        grid: {
          display: true,
          color: "#E8DDD9",
          lineWidth: 1
        }
      },
      y: {
        border: { display: false }, // ← 关键：隐藏 Y 轴线
        grid: {
          display: true,
          color: "#E8DDD9",
          lineWidth: 1
        },
        beginAtZero: true,
        ticks: { display: true } // 按需设为 false 可隐藏 Y 轴数字
      }
    },
    plugins: {
      legend: { display: false },
      tooltip: { enabled: false }
    },
    responsive: true,
    maintainAspectRatio: false,
    elements: {
      point: { radius: 3 }
    }
  }
});

? 总结：

• 隐藏轴线 → scales.{x/y}.border.display = false（精准、推荐）；
• 隐藏整个轴 → scales.{x/y}.display = false（慎用，会连网格一起消失）；
• 定制轴线颜色/宽度 → border.color / border.width（如设 'transparent' 或 0）；
• 保留网格 + 移除刻度短线 → grid.drawTicks = false。

通过上述配置，即可实现参考图中“无粗边框、仅留柔和网格”的现代简约图表效果。