Chart.js 工具提示

2025 年 5 月 18 日 | 3 分钟阅读

工具提示 (Tooltip) 是一种图形用户界面元素，当我们将鼠标悬停在图表项目上时，它会显示更多信息。

语法

工具提示的 "enabled" 参数必须设置为 true 才能显示数据标签。如果设置为 false，则工具提示将被禁用。使用 "options.plugins.tooltip" 命名空间来配置图表工具提示。语法如下所示。

 
options: {
plugins: {
tooltip: {
enabled: true,
(Write tooltip's style parameter)
},
}
} 

Chart.js 工具提示的示例

Chart.js 的标题、文本和标签选项如下所示。配置表显示了工具提示中的元素及其功能。

示例 1

以下示例显示了具有基本参数的 chart.js 工具提示。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js basic chart with tooltip </h1>
<canvas id = "chartData" aria-label = "chart" height = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'bar',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2,
}],
},
options: {
responsive: false,
plugins: {
tooltip: {
enabled: true,
usePointStyle: true,
titleAlign: 'center',
titleColor: 'gold',
titleSpacing: 3,
TitleFont: {
weight: 'bold'
},
backgroundColor: 'black',
bodyColor: 'orange',
bodyAlign: 'center',

}
}
},
});
</script>
</body>
</html>   

输出

输出显示了图表工具提示及其样式。

示例 2

以下示例显示了具有基本参数的 chart.js 工具提示。我们可以设置工具提示的字体粗细和字体样式。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js basic chart with tooltip </h1>
<canvas id = "chartData" aria-label = "chart" height = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'bar',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2,
}],
},
options: {
responsive: false,
plugins: {
tooltip: {
enabled: true,
usePointStyle: true,
titleAlign: 'center',
titleColor: 'gold',
titleSpacing: 5,
TitleFont: {
weight: 'bold'
},
backgroundColor: 'black',
bodyColor: 'aqua',
bodyAlign: 'center',
bodyFont: {
weight: 'italic'
},
}
}
},
});
</script>
</body>
</html>   

输出

输出显示了图表工具提示及其样式。

示例 3

以下示例显示了具有基本参数的 chart.js 工具提示。我们可以使用回调函数设置标题对齐方式和点样式。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js basic chart with tooltip </h1>
<canvas id = "chartData" aria-label = "chart" height = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'bar',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2,
}],
},
options: {
responsive: false,
plugins: {
tooltip: {
enabled: true,
usePointStyle: true,
titleAlign: 'right',
titleColor: 'gold',
titleSpacing: 3,
TitleFont: {
weight: 'bold'
},
backgroundColor: 'green',
bodyColor: 'orange',
bodyAlign: 'center',
bodyFont: {
weight: 'italic'
},
callbacks: {
labelPointStyle: function(context) {
return {
pointStyle: 'triangle',
rotation: 0
};
},

}
}
}
},
});
</script>
</body>
</html>  

输出

输出显示了图表工具提示及其样式。

结论

工具提示是图表元素信息的高级动画。我们可以根据需求和样式设置数据。

下一主题如何在 Chart.js 中动态更新值

Chart.js 工具提示

语法

Chart.js 工具提示的示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Chart.js 教程

Chart.js 工具提示

语法

Chart.js 工具提示的示例

结论

相关帖子

Chart.js 字体配置

Chart.js 数据抽稀配置

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

Chart.js 标题

Chart.js 基础和插件开发者

Chart.js 教程

Chart.js 选项和内边距

Chart.js 散点图

Chart.js 气泡图

Chart.js 雷达图

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器