数据可视化清新版【chart.js】学习笔记9.0—气泡图(Bubble Chart)

本文链接：https://blog.csdn.net/qq_36288559/article/details/112360158

Bubble Chart——（气泡图）

气泡图用于同时显示三维数据。气泡的位置由前两个维度以及相应的水平和垂直轴线确定。第三个维度由单个气泡的大小来表示。
官方文档：https://www.chartjs.org/docs/latest/charts/bar.html

用法示例
var myBubbleChart = new Chart(ctx, {
type: ‘bubble’,
data: data,
options: options
});

图表属性（博主这边只列举看出了比较常用和设置影响明显的属性）

属性	描述	类型	默认值
label	图例和工具提示中显示的数据集标签。	string	undefined
backgroundColor	气泡背景色。	Color	‘rgba(0, 0, 0, 0.1)’
borderColor	气泡边框颜色。	Color	‘rgba(0, 0, 0, 0.1)’
borderWidth	气泡边框宽度（以像素为单位）。	number	1
pointStyle	气泡形状样式。	string	‘circle’
radius	气泡半径（以像素为单位）。	number	3
hoverBackgroundColor	悬停时气泡背景颜色。	Color	undefined
hoverBorderColor	悬停时气泡边框的颜色。	Color	undefined
hoverBorderWidth	悬停时的气泡边框宽度（以像素为单位）。	number	1
hoverRadius	悬停时的气泡附加半径（以像素为单位）。	number	4
hitRadius	气泡，用于点击检测的附加半径（以像素为单位）。	number	1

相关属性详解

pointStyle 点样式，支持以下值：‘circle’，‘cross’，‘crossRot’，‘dash’，‘line’，‘rect’，‘rectRounded’，‘rectRot’，‘star’，‘triangle’

let ctx = document.getElementById("myChart7");
let myChart = new Chart(ctx, {
    type: 'bubble',
    data: {
      datasets: [{
            label: '# of Votes',
            pointStyle:'circle',//默认值
            data: [
               {x:10,y:20,r:8},
               {x:20,y:10,r:12},
               {x:12,y:23,r:10},
               {x:30,y:4,r:10},
               {x:1,y:4,r:8},
            ],
            backgroundColor: backgroundColor,
            borderColor:borderColor,
            borderWidth: 1
       }]
     },
     options: options
});

在这里插入图片描述

let ctx = document.getElementById("myChart7");
let myChart = new Chart(ctx, {
    type: 'bubble',
    data: {
      datasets: [{
            label: '# of Votes',
            pointStyle:'rect',//默认值
            data: [
               {x:10,y:20,r:8},
               {x:20,y:10,r:12},
               {x:12,y:23,r:10},
               {x:30,y:4,r:10},
               {x:1,y:4,r:8},
            ],
            backgroundColor: backgroundColor,
            borderColor:borderColor,
            borderWidth: 1
       }]
     },
     options: options
});

在这里插入图片描述

radius 气泡半径（以像素为单位）。这里设置的是全局气泡半径，当数据data中未设置半径r即可生效，如设置了半径r则气泡以r为准。

let ctx = document.getElementById("myChart7");
let myChart = new Chart(ctx, {
    type: 'bubble',
    data: {
      datasets: [{
            label: '# of Votes',
            radius:12,
            data: [
               {x:10,y:20,r:8},
               {x:20,y:10,r:12},
               {x:12,y:23,r:10},
               {x:30,y:4,r:10},
               {x:1,y:4,r:8},
            ],
            backgroundColor: backgroundColor,
            borderColor:borderColor,
            borderWidth: 1
       }]
     },
     options: options
});

在这里插入图片描述

let ctx = document.getElementById("myChart7");
let myChart = new Chart(ctx, {
    type: 'bubble',
    data: {
      datasets: [{
            label: '# of Votes',
            radius:12,
            data: [
               {x:10,y:20},
               {x:20,y:10},
               {x:12,y:23},
               {x:30,y:4},
               {x:1,y:4},
            ],
            backgroundColor: backgroundColor,
            borderColor:borderColor,
            borderWidth: 1
       }]
     },
     options: options
});

在这里插入图片描述

补充

气泡图的数据data和之前的几个有所不同，是对象：
[ {x:0,y:0,r:0}，{x:0,y:0,r:0} ]或者[ {x:0,y:0}，{x:0,y:0} ]
其中x表示横坐标，y表示纵坐标，r表示气泡半径。

拓展

多组气泡图
在这里插入图片描述

let ctx = document.getElementById("myChart7");
let myChart = new Chart(ctx, {
    type: 'bubble',
    data: {
      datasets: [
      		{
            label: '# of Votes',
            radius:12,
            data: [
               {x:4,y:20,r:6},
               {x:11,y:10,r:16},
               {x:18,y:23,r:20},
               {x:25,y:4,r:12},
               {x:29,y:4,r:10},
            ],
            backgroundColor: backgroundColor1,
            borderColor:borderColor1,
            borderWidth: 1
       		},
      		{
            label: '# of Votes',
            radius:12,
            data: [
       		   {x:3,y:12,r:10},
               {x:10,y:22,r:12},
               {x:18,y:10,r:24},
               {x:24,y:30,r:16},
               {x:28,y:25,r:6},
            ],
            backgroundColor: backgroundColor2,
            borderColor:borderColor2,
            borderWidth: 1
       		}
     ]
     },
     options: options
});