Chart.js 是一个流行的 JavaScript 数据可视化库，能够创建各种类型的图表。其中，Multi-Tooltip 标签是一种非常有用的功能，它允许在同一点上显示多个数据集的信息。在本文中，我们将详细介绍 Chart.js 的 Multi-Tooltip 标签，并提供示例代码和学习指导。
Multi-Tooltip 标签的作用
默认情况下，Chart.js 在用户悬停在图表的数据点上时，只会显示针对该数据点的单个 Tooltip（工具提示）。但是，在某些情况下，我们可能需要同时展示多个数据集的信息。例如，在比较两个城市的温度趋势时，我们需要在同一点上显示这两个城市的温度值。这时，Multi-Tooltip 标签就派上用场了。
如何使用 Multi-Tooltip 标签
要使用 Multi-Tooltip 标签，需要在 Chart.js 的配置选项中设置 multiTooltipTemplate 属性。该属性可以接受一个包含占位符的字符串，其中每个占位符对应一个数据集。以下是一个示例代码：
-- -------------------- ---- -------
--- ---- - -
------- ------ ----- ----- ----- ----- ----- ------
--------- --
------ ------
---------- ------------------------
------------ ----------------------
----------- ----------------------
----------------- -------
------------------- -------
--------------------- ----------------------
----- ---- --- --- --- --- --- ---
-- -
------ ------
---------- ------------------------
------------ ----------------------
----------- ----------------------
----------------- -------
------------------- -------
--------------------- ----------------------
----- ---- --- --- --- --- --- ---
--
--
--- ------- - -
--------------------- ---- ------------ -- - --- ----- ---
--
--- --- - ----------------------------------------------------
--- ----------- - --- --------------------- ---------上述代码创建了一个包含两个数据集的折线图，并设置了 multiTooltipTemplate 属性为 <%= datasetLabel %> - <%= value %>。这表示当用户悬停在图表的数据点上时，将同时显示该数据点对应的两个数据集的标签和值。
Multi-Tooltip 标签的更多用法
除了简单的示例代码外，Multi-Tooltip 标签还有许多其他用法。例如，可以使用 HTML 和 CSS 自定义 Tooltip 的样式，或者使用 JavaScript 动态地生成 Tooltip 的内容。以下是一些有用的技巧：
自定义 Tooltip 样式
要自定义 Tooltip 的样式，可以在 multiTooltipTemplate 中使用 HTML 和 CSS。例如，以下代码将创建一个带有红色边框和灰色背景的 Tooltip：
var options = {
multiTooltipTemplate: "<div style='border: 1px solid red; background-color: gray;'><%= datasetLabel %> - <%= value %></div>"
};动态生成 Tooltip 内容
有时候，我们需要动态地生成 Tooltip 的内容，例如根据用户的点击操作更新数据集。为了实现这个功能，可以使用 Chart.js 提供的回调函数。以下是一个示例代码：
var options = {
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>",
tooltipEvents: [],
onTooltipShow: function(tooltip, data) {
var index = tooltip.chart.getSegmentsAtEvent(tooltip.events[0])[0].
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/13395) ，转载请注明来源
[https://www.javascriptcn.com/post/13395](https://www.javascriptcn.com/post/13395)