Labeling Your Axes: A Beginner’s Guide to Chart.js Axis Labels

Chart.js 圖表非常適合數據可視化，但要使它們真正具有信息性，你需要為坐標軸提供清晰且簡潔的標籤。這些標籤告訴觀眾每個坐標軸上的數據表示什麼。以下是理解和自定義 Chart.js 坐標軸標籤的初學者友好指南：

理解圖表中的坐標軸：

大多數圖表，包括折線圖、條形圖和散點圖，都使用兩個坐標軸

X 軸（水平）： 這個軸通常代表自變量，通常是一個類別或時間值。
Y 軸（垂直）： 這個軸代表因變量，即根據 X 軸值而變化的數值。

在 Chart.js 中添加坐標軸標籤：

默認情況下，Chart.js 可能不會自動顯示坐標軸標籤。以下是添加標籤的方法：

定義你的標籤：

首先，創建一個對象來配置你的圖表（通常稱為 config）。在這個對象中，你將定義 options 屬性：

const config = {
  // ... other chart options
  options: {
    scales: {
      x: {}, // Axis label properties go here
      y: {}
    }
  }
};

設置 X 軸標籤：

在 options 屬性內，使用 scales.x.title 屬性來定義 X 軸的標籤：

options: {
  scales: {
    x: {
      title: {
        display: true, // Set to true to display the label
        text: 'Month'  // Your desired label text
      }
    }
  }
}

display: true 確保標籤可見。
text: 'Month' 設置實際的標籤文本。

設置 Y 軸標籤：

同樣，使用 scales.y.title 屬性來定義 Y 軸的標籤：

options: {
  scales: {
    x: {
      // ... X-axis options
    },
    y: {
      title: {
        display: true,
        text: 'Sales Amount ($)'
      }
    }
  }
}

自定義坐標軸標籤：

Chart.js 提供了額外的選項來個性化你的坐標軸標籤：

字體和顏色： 你可以使用 font 和 color 等屬性在 title 對象內控制字體樣式和顏色。
對齊方式： 使用 align: 'start', align: 'center'或 align: 'end' 來設置標籤相對於坐標軸的位置。

總結：

通過添加清晰且具有信息性的坐標軸標籤，你可以大大提升 Chart.js 圖表的可讀性和理解度。

探索 Chart.js 文檔 https://www.chartjs.org/docs/latest/getting-started/ 以獲取有關坐標軸標籤自定義的更多細節，並發掘其他令人興奮的功能，來提升你的圖表！

額外提示：

對於具有大量數據點或長標籤的圖表，考慮啟用標籤旋轉以防止重疊。你可以在 Chart.js 文檔中的 scales.x.ticks 和 scales.y.ticks 屬性中找到標籤旋轉的選項。