Chart.js 气泡图

2025年5月17日 | 阅读 5 分钟

气泡图同时显示数据的三个维度。前两个维度及其各自的水平和垂直轴决定了气泡的位置。每个气泡的大小代表第三个维度。

语法

以下语法展示了使用 Chart.js 语言创建的气泡图。

 
const config = {
type: 'bubble',
data: graph data,
options: {}
};   

以下语法展示了气泡的数据集。

 
data: {
labels: ["CHART.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [{
x: number,
y: number,
z: number
}],
}],
}   

说明

x、y 和 z 轴对于设置特定标签的数据至关重要。

多个标签需要协调多个轴才能构成气泡图。

默认选项

气泡图类型的默认值也是可修改的。这将为之后创建的所有气泡图设置新的默认值。

Chart.overrides.bubble 包含气泡图的默认设置。

数据集属性

datasets[index] - 此选项用于仅限数据集
datasets.bubble - 此选项用于所有气泡数据集
elements.point - 此选项用于所有点元素
options - 此元素 "options" 用于整个图表

气泡图示例

以下示例展示了气泡图及其设置。

示例 1

该示例展示了基本的气泡图。基本的气泡及其 UI 根据元素和数据进行显示。

 
<!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 bubble graph </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "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: 'bubble',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [{
x: 25,
y: 21,
z: 20
},
{
x: 25,
y: 25,
z: 25
},
{
x: 23,
y: 11,
z: 25
},
{
x: 30,
y: 18,
z: 25
},
{
x: 31,
y: 28,
z: 25
},
{
x: 27,
y: 45,
z: 35
}
],

}],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>   

输出

输出显示基本的气泡图。

示例 2

基本的气泡及其 UI 根据元素显示，并带有颜色坐标和半径。

 
<!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 bubble graph </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "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: 'bubble',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [{
x: 25,
y: 21,
z: 20
},
{
x: 25,
y: 25,
z: 25
},
{
x: 23,
y: 11,
z: 25
},
{
x: 30,
y: 18,
z: 25
},
{
x: 31,
y: 28,
z: 25
},
{
x: 27,
y: 45,
z: 35
}
],
backgroundColor: ['orange', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'],
radius: 6,
}],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>   

输出

输出显示基本的气泡图。

示例 3

该示例可以根据气泡半径设置不同的边框颜色和边框宽度。边框颜色可以设置为单个或多个颜色，具体取决于气泡元素。

 
<!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 bubble graph </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "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: 'bubble',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [{
x: 25,
y: 21,
z: 20
},
{
x: 25,
y: 25,
z: 25
},
{
x: 23,
y: 11,
z: 25
},
{
x: 30,
y: 18,
z: 25
},
{
x: 31,
y: 28,
z: 25
},
{
x: 27,
y: 45,
z: 35
}
],
backgroundColor: ['orange', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['black','navy','red','green','grey','blue'],
radius: 8,
borderWidth:3,

}],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>   

输出

输出显示基本的气泡图。

样式

每个气泡的样式可以通过属性控制

名称	描述
backgroundColor	设置为气泡背景颜色。
borderColor	设置为气泡边框颜色。
borderWidth	气泡边框宽度（以像素为单位）。
pointStyle	设置为气泡形状样式。
rotation	设置为气泡旋转角度（以度为单位）。
hoverBackgroundColor	设置为悬停时气泡的背景颜色。
hoverBorderColor	设置为悬停时气泡的边框颜色。
hoverBorderWidth	设置为悬停时气泡的边框宽度（以像素为单位）。
hoverRadius	设置为悬停时气泡的半径（以像素为单位）。
hitRadius	设置气泡并添加用于点击检测的半径（以像素为单位）。

示例

该示例展示了带有悬停 UI 和其他选项的气泡图。我们可以在悬停效果后设置半径、边框和背景颜色。

 
<!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 bubble graph </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "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>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'bubble',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [{
x: 25,
y: 21,
z: 20
},
{
x: 25,
y: 25,
z: 25
},
{
x: 23,
y: 11,
z: 25
},
{
x: 30,
y: 18,
z: 25
},
{
x: 31,
y: 28,
z: 25
},
{
x: 27,
y: 45,
z: 35
}
],
backgroundColor: ['orange', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['black','navy','red','green','grey','blue'],
radius: 8,
borderWidth:3,
pointStyle:'triangle',
hoverBackgroundColor: ['white'],
hoverBorderColor: ['black'],
hoverBorderWidth: 4,
hoverRadius: 10,
}],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>   

输出

输出显示基本的气泡图。

结论

气泡图需要使用三个轴（X、Y 和 Z）显示图形表示。

下一主题Chartjs-color-for-ui

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 副标题

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器