Chart.js 标题

Chart.js 标题显示图表元素的标题。 这种设置有助于构建图表的标题。 它确定位置、对齐方式、字体、显示和颜色。

语法

以下语法显示了图表标题。

标题配置的选项

以下列表包含一些选项

• 对齐方式： 您可以使用此选项将文本与“start”、“center”或“end”对齐。 它默认值为 center，类型为 String。
• 颜色： 可以使用此选项更改文本的颜色。 它属于 Color 类型，Chart.defaults.color 是其默认值。
• 显示： 此用于控制标题的屏幕可见性。 它具有布尔类型，其默认值为 false。
• FullSize： 它有助于指定画布框的整个宽度和高度。 它具有布尔类型，其默认值为 true。
• 位置： 它有助于指定图表标题的位置。 它属于 String 类型，顶部是默认值。
• 字体： 它用于配置图表的字体。 它具有字体类型，粗体是其默认值。
• 填充： 它用于在标题周围应用填充，这只能在顶部和底部完成。 它是填充类型，10 是其默认值。
• 文本： 这是将作为标题显示在屏幕上的实际文本。 它的默认值为 ''，类型为 string|string[]。

方法

• 主要使用 HTML 设计中的 HTML 标签来显示图表。
• 初始化 ChartJS 对象，设置 type、label、data 和其他参数等各种属性是代码的此脚本部分的第一步。
• 设置已在 options 属性中对齐。
• 我们必须为此标题配置描述几个属性，例如 full-size、position、display、text、align、color 等。

示例

以下示例显示了 chart.js. 标题。 我们可以为标题设置颜色、宽度和其他 UI 相关的样式。

示例 1

以下示例显示了图表的基本 chart.js 标题。

输出

输出显示了基本的图表标题功能。

示例 2

以下示例显示了 chart.js 标题，它位于粗体和开始位置。

输出

输出显示了基本的图表标题功能。

示例 3

以下示例显示了 chart.js 标题，它位于顶部、粗体和开始位置。

输出

输出显示了基本的图表标题功能。

示例 4

在此示例中，我们使用折线图来显示来自网站访问者的样本数据。 在这里，已定义数据集，并且也使用了标题配置。 我们在标题配置中为图表命名。

输出

输出显示了基本的图表标题功能。

结论

我们可以根据图表的要求和必要性修改标题。 图表或图形需要此项以了解主题及其标题。