標題

圖表標題定義要在圖表頂部繪製的文字。

標題設定

命名空間：options.plugins.title，圖表標題的全局選項定義在 Chart.defaults.plugins.title 中。

名稱	類型	預設值	可腳本化	描述
align	字串	'center'	是	標題的對齊方式。更多...
color	顏色	Chart.defaults.color	是	文字顏色。
display	布林值	false	是	是否顯示標題？
fullSize	布林值	true	是	標記此框應佔用畫布的完整寬度/高度。如果為 false，則此框的大小和位置將在圖表區域上方/旁邊。
position	字串	'top'	是	標題位置。更多...
font	字體	{weight: 'bold'}	是	請參閱 字體
padding	邊距	10	是	要應用在標題周圍的邊距。僅實作 top 和 bottom。
text	字串|字串[]	''	是	要顯示的標題文字。如果指定為陣列，則文字將以多行呈現。

注意

如果您需要更多視覺自訂，可以使用 HTML 和 CSS 實作標題。

位置

可用的標題位置值為

• 'top'
• 'left'
• 'bottom'
• 'right'

對齊

標題的對齊方式。選項為

• 'start'
• 'center'
• 'end'

範例用法

以下範例將在建立的圖表上啟用「自訂圖表標題」的標題。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Custom Chart Title'
            }
        }
    }
});

此範例顯示如何指定獨立的頂部和底部標題文字邊距

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Custom Chart Title',
                padding: {
                    top: 10,
                    bottom: 30
                }
            }
        }
    }
});