如何在 Chart.js 4 中隐藏或自定义坐标轴线（X/Y 轴线）-html教程-PHP中文网

本文详解 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 更语义清晰、性能更优。

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

Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式，用于飞书日历导入导出及数据集成。

下载

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 }
    }
  }
});

? 总结：