标题

¥Title

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

¥The chart title defines text to draw at the top of the chart.

标题配置

¥Title Configuration

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

¥Namespace: options.plugins.title, the global options for the chart title is defined in Chart.defaults.plugins.title.

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

注意

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

¥If you need more visual customizations, you can implement the title with HTML and CSS.

位置

¥Position

可能的标题位置值是：

¥Possible title position values are:

• 'top'

• 'left'

• 'bottom'

• 'right'

对齐

¥Align

标题对齐。选项是：

¥Alignment of the title. Options are:

• 'start'

• 'center'

• 'end'

用法示例

¥Example Usage

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

¥The example below would enable a title of 'Custom Chart Title' on the chart that is created.

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

此示例显示如何指定单独的顶部和底部标题文本填充：

¥This example shows how to specify separate top and bottom title text padding:

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