# 坐标轴设置

URL: https://caijiao.org/chartjs/04-styling/03-axes
Source: docs/chartjs/04-styling/03-axes.md
Description: 介绍如何在 Chart.js 中配置和自定义坐标轴，包括设置坐标轴类型、刻度、网格线和标签样式，帮助更好地展示数据。

在使用 [Chart.js](/chartjs/) 创建图表时，坐标轴的设置至关重要。你可以自定义坐标轴的类型、刻度显示、网格线样式和标签格式，从而让图表更清晰、易读，满足不同数据展示需求。

```js
(function () {
  const ctx = document.getElementById("axisChart").getContext("2d");
  const axisChart = new Chart(ctx, {
    type: "line",
    data: {
      labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      datasets: [
        {
          label: "销售额",
          data: [150, 200, 180, 220, 170, 210, 190],
          borderColor: "rgb(75, 192, 192)",
          fill: false,
          tension: 0.3,
        },
      ],
    },
    options: {
      responsive: true,
      scales: {
        x: {
          type: "category",
          ticks: {
            color: "#2c3e50",
            font: { size: 14, weight: "bold" },
          },
          grid: {
            display: false,
          },
          title: {
            display: true,
            text: "日期",
            color: "#34495e",
            font: { size: 16, weight: "bold" },
          },
        },
        y: {
          type: "linear",
          ticks: {
            color: "#2c3e50",
            font: { size: 14 },
          },
          grid: {
            color: "rgba(0,0,0,0.1)",
            borderDash: [5, 5],
          },
          title: {
            display: true,
            text: "销售额（元）",
            color: "#34495e",
            font: { size: 16, weight: "bold" },
          },
          beginAtZero: true,
        },
      },
      plugins: {
        legend: { display: true },
        tooltip: { enabled: true },
      },
    },
  });
})();
```

[在线代码演示](/chartjs/demos/13.html)