标题

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

标题配置

命名空间： options.plugins.title，图表标题的全局选项在 Chart.defaults.plugins.title 中定义。

名称	类型	默认	可编写脚本	描述
align	string	'center'	是的	标题对齐。 more...
color	Color	Chart.defaults.color	是的	文本的颜色。
display	boolean	false	是的	显示标题了吗？
fullSize	boolean	true	是的	标记此框应占据画布的整个宽度/高度。 如果是 false，框会调整大小并放置在图表区域上方/旁边。
position	string	'top'	是的	标题的位置。 more...
font	Font	{weight: 'bold'}	是的	见 字体
padding	Padding	10	是的	标题周围的填充。 仅实现了 top 和 bottom。
text	string|string[]	''	是的	要显示的标题文本。 如果指定为数组，则文本渲染在多行上。

注意

如果你需要更多视觉定制，你可以使用 HTML 和 CSS 来实现标题。

位置

可能的标题位置值是：

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

对齐

标题对齐。 选项是：

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

用法示例

下面的示例将在创建的图表上启用标题 'Custom Chart Title'。

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
                }
            }
        }
    }
});