气泡图用于展示三个变量之间的关系。
气泡的位置由前两个变量决定，对应的是 X 轴和 Y 轴，第三个参数为气泡的大小。
{// X 轴对应值x: number,// Y 轴对应值y: number,// 气泡半径，单位为像素r: number }
泡图的 type 属性为 bubble ，type 描述了图表类型。
const config = {type: 'bubble',data: data,options: {}
};
接下来我们创建一个简单的气泡图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js"></script>
</head>
<body><canvas id="myChart" width="400" height="200"></canvas>
<script>
const ctx = document.getElementById('myChart');
const data = {datasets: [{label: '气泡图实例',data: [{x: 20, // X 轴y: 30, // Y 轴r: 15 // 气泡半径}, {x: 30,y: 20,r: 20}, {x: 40,y: 10,r: 10}],backgroundColor: 'rgb(255, 99, 132)'}]
};
const config = {type: 'bubble', // 设置图表类型data: data, // 设置数据集options: {},
};
const myChart = new Chart(ctx, config);
</script></body>
</html>
