标题

图表标题定义在图表顶部绘制的文本。

标题配置

命名空间: 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	string|string[]	''	是	要显示的标题文本。如果指定为数组，则文本将在多行上呈现。

注意

如果您需要更多视觉自定义，可以使用 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
                }
            }
        }
    }
});