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

  气泡图(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设置气泡的形状,可以设置为圆角矩形,如下图所示,取值范围详见参考文献2circle

在这里插入图片描述

参考文献:
[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

Element UI是一个基于Vue.js的开源UI组件库,它提供了丰富的预构建UI组件,包括表格、表单、按钮、导航栏等。而Chart.js是一个独立的JavaScript库,用于创建各种类型的图表,如线图、柱状图、饼图等。 在Element UI中,虽然官方并没有直接集成Chart.js,但你可以结合使用。Element UI本身并不提供图表组件,但你可以自由地在Element UI项目中引入和使用Chart.js来制作你需要的图表。你可以在Element UI的基础上,利用Chart.js的API来创建图表,并通过Vue的生命周期钩子(如`mounted()`)或事件系统来初始化和更新这些图表。 如果你想在Element UI中使用Chart.js,你需要自己安装Chart.js库,然后在Vue组件中导入并创建图表。以下是基本步骤: 1. 安装Chart.js:`npm install chart.js --save` 2. 在Vue组件中导入`Chart`模块:`import Chart from 'chart.js'` 3. 在模板中创建一个canvas元素用于渲染图表。 4. 在组件的`mounted()`钩子中实例化和配置Chart。 例如: ```html <template> <div> <canvas ref="myChart"></canvas> </div> </template> <script> import Chart from 'chart.js' export default { mounted() { this.createChart() }, methods: { createChart() { const ctx = this.$refs.myChart.getContext('2d'); new Chart(ctx, { type: 'bar', // 替换为你需要的图表类型 data: { // 数据配置 labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', data: [65, 59, 80, 81, 56, 55, 40], backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255, 99, 132, 1)', borderWidth: 1 }] }, options: {} // 配置选项 }); } } } </script> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值