chart.js使用学习——气泡图

最新推荐文章于 2024-06-18 09:42:53 发布

gc_2299

最新推荐文章于 2024-06-18 09:42:53 发布

阅读量1.1k

点赞数 1

分类专栏：网页编程文章标签： chart.js 气泡图

本文链接：https://blog.csdn.net/gc_2299/article/details/120853451

版权

网页编程专栏收录该内容

149 篇文章 11 订阅

订阅专栏

气泡图（Bubble Chart）能够同时展示三类数据之间的关系，其中前两个维度的数据用于确定气泡的位置，第三维的数据用于确定气泡大小，因此气泡图数据集中的每条记录必须包含三个数据，不能像之前图形那样仅包含一个数据。

基本用法

如下列代码及效果图所示，创建气泡图主要是在Chart类构造函数中指定type为bubble即可。

		var ctx = document.getElementById('myChart');
        const data = {
                datasets: [{
                    label: '气泡图数据集',
                    data: [
                            {
                                x: 20,
                                y: 30,
                                r: 15
                            }, 
                            {
                                x: 40,
                                y: 10,
                                r: 10
                            },
                            {
                                x: 100,
                                y: 36,
                                r: 5
                            },
                            {
                                x: 80,
                                y: 29,
                                r: 3
                            },
                            {
                                x: 140,
                                y: 110,
                                r: 30
                            }
                        ],
                    backgroundColor: 'rgb(255, 99, 132)'
                }]
                };
        var myBubbleChart = new Chart(ctx, {
            type: "bubble",
            data: data,
            options: []
        });

在这里插入图片描述
设置多个数据集的话，每个数据集对应的气泡图在一起展示，其效果如下图所示（多个数据集中位置相近的气泡会相互覆盖，此时可以设置数据集的order属性调整绘图顺序，要显示被覆盖的气泡)。

常用属性

属性名称	简要说明	默认值
backgroundColor	设置数据集的填充色	rgba(0, 0, 0, 0.1)
borderColor	设置边框线颜色	rgba(0, 0, 0, 0.1)
borderWidth	设置边框线的线宽	3
hoverBackgroundColor	鼠标悬停时的背景色
hoverBorderColor	鼠标悬停时的边框颜色
hoverBorderWidth	鼠标悬停时的边框线线宽	1
hoverRadius	鼠标悬停时气泡半径的增加量	4
hitRadius	鼠标与气泡接触的额外检测半径，也即鼠标移动到气泡半径+hitRadius之和的位置即认为鼠标移动到气泡上	1
order	数据集的绘图顺序	0
pointStyle	设置气泡的形状，可以设置为圆角矩形，如下图所示，取值范围详见参考文献2	circle

在这里插入图片描述

参考文献：
[1]https://baike.baidu.com/item/%E6%B0%94%E6%B3%A1%E5%9B%BE/10816649?fr=aladdin
[2]https://www.chartjs.org/docs/latest/charts/bubble.html
[3]https://chartjs.bootcss.com/docs/charts/bubble.html
[4]https://blog.csdn.net/qq_36288559/article/details/112360158