標籤軸

在建立圖表時，您會想告訴觀看者他們正在觀看的資料。為此，您需要標籤軸。

比例標題組態

命名空間：options.scales[scaleId].title，它定義標題的選項。請注意，這只套用於直角坐標系軸。

名稱	類型	預設值	描述
顯示	布林值	false	如果為真，顯示軸標題。
對齊	字串	'center'	座標軸標題的對齊。可能的選項有 'start'、'center' 和 'end'
text	string|string[]	''	標題的文字。（例如「人數」或「回應選項」）
color	顏色	Chart.defaults.color	標籤顏色。
font	字型	Chart.defaults.font	參閱 字型
padding	内距	4	套用於座標刻度標籤周圍的内距。僅實作 top、bottom 和 y。

建立自訂刻度格式

一般而言，我們也會希望變更刻度記號，以包含資料類型的資訊。例如，加上美元符號 ('$')。為此，您需要覆寫座標軸組態中的 ticks.callback 方法。

此方法會收到 3 個引數

• value - 相關座標軸的內部資料格式中的刻度值。對於時間座標軸來說，它是一個時間戳記。
• index - 刻度陣列中的刻度索引。
• ticks - 包含所有 刻度物件 的陣列。

這個方法的呼叫範圍限定於座標軸。方法內部的 this 是該座標軸物件。

如果該方法傳回 null 或 undefined，相關的網格線將會隱藏。

提示

直線圖和長條圖的預設 x 座標軸（類別座標軸）會使用 index 作為其內部資料格式。若要存取標籤，請使用 this.getLabelForValue(value)。 API: getLabelForValue

在以下範例中，Y 座標軸中每個標籤的前面都會顯示一個美元符號。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, ticks) {
                        return '$' + value;
                    }
                }
            }
        }
    }
});

請注意，覆寫 ticks.callback 意味著您負責標籤的所有格式設定。根據您的使用案例，您可能想要呼叫預設格式設定器，再修改其輸出。在上述範例中，這樣會顯示為

                        // call the default formatter, forwarding `this`
                        return '$' + Chart.Ticks.formatters.numeric.apply(this, [value, index, ticks]);

相關範例

• 刻度組態範例