当前位置: 首页 > 文档资料 > Chart.js 开发文档 >

1.4.4 标题(title

优质
小牛编辑
128浏览
2023-12-01

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

标题配置

标题在options.title中配置。图表标题的全局选项在Chart.defaults.global.title中定义。

名称类型默认值描述
displayBooleanfalse是否显示标题
positionString'top'标题未知更多...
fontSizeNumber12字体大小
fontFamilyString"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"字体集
fontColorColor'#666'字体颜色
fontStyleString'bold'字体样式
paddingNumber10标题文本上下方间距
lineHeightNumber/String1.2单行文本的高度 (参见 MDN)
textString/String[]''标题文字

位置

可用的标题位置为:

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

示例代码

以下示例将在创建的图表上加上“Custom Chart Title”的标题。

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