氣泡圖用于展示三個變量之間的關系。
氣泡的位置由前兩個變量決定，對應的是 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>
