# 标题

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 是的 标题周围的填充。仅实现了 topbottom
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
                }
            }
        }
    }
});