如何在 Chart.js 中自定义图例？

图表图例显示有关图表上显示的数据集的信息。 此图例功能可以根据用户的要求进行自定义，以增强图表的布局和整体外观。

自定义图例的方法

可以通过以下方式自定义图例

• 方法 1：更改图例标题配置
• 方法 2：更改图例标签配置
• 方法 3：修改图例的点击功能

方法 1：更改图例标题配置

在 options.plugins.legend.title 命名空间中，指定应如何配置图例的标题。可以使用图例标题配置来自定义图表中图例上方显示的标题。 此标题提供了有关图表中显示的数据的更多背景信息或详细信息。

语法

以下语法显示了自定义的图例。

示例

以下示例显示了如何将前面描述的策略付诸实践。

输出

输出显示了自定义的图例。

方法 2：更改图例标签配置

在Chart.js中，管理图例中每个标签的外观和行为的设置称为图例标签配置。 通常，图形中的每个标签代表一个数据集。 这允许您在数据集中个性化图例数据集标签。

语法

以下语法显示了自定义的图例。

示例

该示例显示了如何将前面描述的策略付诸实践。

输出

输出显示了自定义的图例。

方法 3：修改图例的点击功能

您可以使用 legend.onClick 回调函数，通过单击 Chart.js 来更改图表和图例。 单击图例项目时，此函数将被激活，从而使您能够指定独特的行为。 当单击图例项目时，e.stopPropagation() 行还会阻止默认情况下切换相关数据集的可见性。 这使您可以完全控制图例单击启动的操作。

语法

以下语法显示了通过修改图例的单击功能来自定义的图例。

示例

在此示例中，单击图例项目会启动 onClick 函数，该函数会刷新图表并为两个数据集创建随机数据。

输出

输出显示了自定义的图例。

结论

自定义图例以各种方式显示图表的标签和图例。 我们可以设置图例标题、标签和 onclick 函数来显示标签。 chart.js 帮助其他人以独特的样式显示每个点和部分标签或图例。