canvas作图系列——气泡图

最新推荐文章于 2025-03-14 22:46:55 发布
最新推荐文章于 2025-03-14 22:46:55 发布
阅读量1.5k 收藏 4
点赞数 2
分类专栏： canvas Javascrip
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lucky_Q/article/details/102842120
版权
本文详细介绍了使用JavaScript在Canvas上绘制两种不同类型的气泡图的方法。一种气泡图的半径大小代表数据值，另一种则通过调整圆心的Y坐标来反映数据比例。文中提供了完整的代码示例，包括如何创建渐变填充、绘制圆圈、添加交互元素如高亮和弹出框。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

气泡图

这里做的气泡图是柱形图的一种变体形式，但是基本思想其实差不多，只不过柱形的高矮换成的半径的大小，当然圆心的坐标也要随之改变，圆心的纵坐标要加上跟半径同比例的缩放系数才能保证圆的底部都在同一条水平线上

图一

在这里插入图片描述

function ybChart(data, index) {
		var dataMax = 0
		for (let i = 0; i < data.length; i++) {
			data[i].riskNumber = parseFloat(data[i].riskNumber)
			if (data[i].riskNumber >= dataMax) {
				dataMax = data[i].riskNumber
			}
		}
		var canvas = document.querySelector("#cav7");
		var zeroPoint = [0, canvas.clientHeight - 10]; //坐标轴0点坐标
		var cav = canvas.getContext("2d");
		cav.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight); //绘制前先清空画布						
		var canvasBGHeight = canvas.clientHeight - 20; //背景高度
		var startRowLinePosition = canvas.clientWidth / data.length/2; //圆球底横X坐标
		var circlePointX = canvas.clientWidth / data.length/2; //圆球圆心标准坐标X
		var circlePointY = canvas.clientHeight * 3 / 5; //圆球圆心标准坐标Y
		var circleRadio = canvas.clientWidth/data.length/2; //圆球标准半径

		//画布背景
		cav.drawImage(
			ybBG,
			0,
			10,
			canvas.clientWidth,
			canvasBGHeight
		);
		for (let i = 0; i < data.length; i++) {
			//圆球底横
			cav.beginPath();
			cav.moveTo(startRowLinePosition - 10, zeroPoint[1] - 3);
			cav.lineTo(startRowLinePosition + 10, zeroPoint[1] - 3);
			cav.lineWidth = 3;
			cav.setLineDash([1, 0]);
			cav.strokeStyle = "#fff";
			cav.stroke();

			// 绘制圆球
			var normalBall = cav.createLinearGradient(
				circlePointX - (circleRadio * data[i].riskNumber) / dataMax,
				circlePointY + circleRadio - (circleRadio * data[i].riskNumber) / dataMax,
				circlePointX + (circleRadio * data[i].riskNumber) / dataMax,
				circlePointY + circleRadio - (circleRadio * data[i].riskNumber) / dataMax
			);
			normalBall.addColorStop(0, "#5128FF");
			normalBall.addColorStop(1, "#9F77FF");
			var lightHighBall = cav.createLinearGradient(
				circlePointX - (circleRadio * data[i].riskNumber) / dataMax,
				circlePointY + circleRadio - (circleRadio * data[i].riskNumber) / dataMax,
				circlePointX + (circleRadio * data[i].riskNumber) / dataMax,
				circlePointY + circleRadio - (circleRadio * data[i].riskNumber) / dataMax
			);
			lightHighBall.addColorStop(0, "#B444FC");
			lightHighBall.addColorStop(1, "#F14B6F");
			var circleRadioYPosition =
				circlePointY + circleRadio - (circleRadio * data[i].riskNumber) / dataMax;

			cav.beginPath();
			cav.arc(
				circlePointX,
				circleRadioYPosition,
				(circleRadio * data[i].riskNumber) / dataMax,
				0,
				Math.PI * 2,
				false
			);
			cav.fillStyle = i == index ? lightHighBall : normalBall;
			cav.fill();

			//圆球底竖
			if (i == index) {
				cav.beginPath();
				cav.moveTo(startRowLinePosition, zeroPoint[1] - 3);
				cav.lineTo(startRowLinePosition, 10);
				cav.lineWidth = 2;
				cav.setLineDash([3, 2]);
				cav.strokeStyle = "#fff";
				cav.stroke();

				//圆球中横线
				cav.beginPath();
				cav.moveTo(0, circleRadioYPosition);
				cav.lineTo(canvas.clientWidth, circleRadioYPosition);
				cav.lineWidth = 2;
				cav.setLineDash([3, 2]);
				cav.strokeStyle = "#fff";
				cav.stroke();

				//绘制交汇圆球
				cav.beginPath();
				cav.arc(circlePointX, circleRadioYPosition, 4, 0, Math.PI * 2, false);
				cav.fillStyle = "#fff";
				cav.fill();

				//圆球外环
				cav.beginPath();
				cav.arc(
					circlePointX,
					circleRadioYPosition,
					(circleRadio * data[i].riskNumber) / dataMax + 5,
					0,
					Math.PI * 2,
					false
				);
				cav.strokeStyle = "#fff";
				cav.lineWidth = 1;
				cav.setLineDash([1, 0]);
				cav.stroke();

				if (
					circleRadioYPosition + floatBG.height >=
					canvasBGHeight
				) {
					var floatBGPositionY =
						circleRadioYPosition - floatBG.height;
				} else {
					var floatBGPositionY =
						circleRadioYPosition - floatBG.height / 2;
				}

				var floatBGWidth =
					(floatBG.width * data[i].riskName.length) / 10 + 20;
				if (index < 3) {
					var floatBGPositionX = circlePointX + 5;
				} else {
					var floatBGPositionX = circlePointX - floatBGWidth - 5;
				}
				var floatLineColor = cav.createLinearGradient(
					floatBGPositionX + 10,
					floatBGPositionY + floatBG.height / 2 - 10,
					floatBGPositionX + floatBGWidth + 5,
					floatBGPositionY + floatBG.height / 2 - 10
				);
				floatLineColor.addColorStop(0, "rgba(255, 255, 255,0)");
				floatLineColor.addColorStop(1, "rgba(255, 255, 255,1)");
			} else {
				cav.beginPath();
				cav.moveTo(startRowLinePosition, zeroPoint[1] - 3);
				cav.lineTo(startRowLinePosition, zeroPoint[1] - 70);
				cav.lineWidth = 2;
				cav.setLineDash([1, 0]);
				cav.strokeStyle = "#fff";
				cav.stroke();
			}
			circlePointX += canvas.clientWidth / data.length;
			startRowLinePosition += canvas.clientWidth / data.length;
		}
		//弹出框
		cav.drawImage(
			floatBG,
			floatBGPositionX,
			floatBGPositionY,
			floatBGWidth,
			80
		);

		//弹框分割线
		cav.beginPath();
		cav.moveTo(
			floatBGPositionX + 10,
			floatBGPositionY + floatBG.height / 2 - 10
		);
		cav.lineTo(
			floatBGPositionX + floatBGWidth - 10,
			floatBGPositionY + floatBG.height / 2 - 10
		);
		cav.setLineDash([2, 1]);
		cav.strokeStyle = floatLineColor;
		cav.stroke();
		//弹框文字
		cav.textAlign = "start";
		cav.textBaseline = "bottom";
		cav.font = "16px MeicrosoftYahei";
		cav.fillStyle = "#fff";
		cav.fillText(
			data[index].riskName,
			floatBGPositionX + 10,
			floatBGPositionY + floatBG.height / 2 - 15
		);

		cav.textAlign = "start";
		cav.textBaseline = "top";
		cav.font = "bold 36px Akrobat-Black";
		cav.fillStyle = "#fff";
		cav.fillText(
			data[index].riskNumber + "%",
			floatBGPositionX + 10,
			floatBGPositionY + floatBG.height / 2 - 5
		);
	}

图二在这里插入图片描述

这个图标跟上面那个其实差不多，只不过这里的圆心Y坐标的计算公式不一样
画布高度+圆心半径*数据比值-数据比值*画布高度+顶部预留高度

JS

function floatBallChart(data, index) {
		var dataMax = 0
		for (let i = 0; i < data.length; i++) {
			data[i].riskNumber = parseFloat(data[i].riskNumber)
			if (data[i].riskNumber >= dataMax) {
				dataMax = data[i].riskNumber
			}
		}
		var canvas = document.querySelector("#cav10");
		var zeroPoint = [0, canvas.clientHeight - 10]; //坐标轴0点坐标
		var cav = canvas.getContext("2d");
		cav.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight); //绘制前先清空画布						
		var canvasBGHeight = canvas.clientHeight - 20; //背景高度
		var startRowLinePosition = canvas.clientWidth / data.length*3/4+20; //圆球底横X坐标
		var circlePointX = canvas.clientWidth / data.length*3/4+20; //圆球圆心标准坐标X
		var circleRadio = canvas.clientWidth/data.length-10 //圆球标准半径

		//画布背景
		cav.drawImage(
			ybBG,
			0,
			10,
			canvas.clientWidth,
			canvasBGHeight
		);
		for (let i = 0; i < data.length; i++) {

			// 绘制圆球
			//圆球圆心纵坐标
			var circleRadioYPosition =
			canvasBGHeight+circleRadio*data[i].riskNumber / dataMax - data[i].riskNumber / dataMax*canvasBGHeight+20;
			var normalBall = cav.createLinearGradient(
				circlePointX - (circleRadio * data[i].riskNumber) / dataMax,
				circleRadioYPosition,
				circlePointX + (circleRadio * data[i].riskNumber) / dataMax,
				circleRadioYPosition
			);
			normalBall.addColorStop(0, "#9F77FF");
			normalBall.addColorStop(1, "#9F77FF");
			var lightHighBall = cav.createLinearGradient(
				circlePointX - (circleRadio * data[i].riskNumber) / dataMax,
				circleRadioYPosition,
				circlePointX + (circleRadio * data[i].riskNumber) / dataMax,
				circleRadioYPosition
			);
			lightHighBall.addColorStop(0, "#B444FC");
			lightHighBall.addColorStop(1, "#F14B6F");
			

			cav.beginPath();
			cav.arc(
				circlePointX,
				circleRadioYPosition,
				(circleRadio * data[i].riskNumber) / dataMax,
				0,
				Math.PI * 2,
				false
			);
			cav.fillStyle = i == index ? 'rgba(222, 72, 154,0.3)' : 'rgba(119, 78, 255,0.3)';
			cav.fill();

			//圆球底竖
			if (i == index) {
				cav.beginPath();
				cav.moveTo(startRowLinePosition, zeroPoint[1] - 3);
				cav.lineTo(startRowLinePosition, 10);
				cav.lineWidth = 2;
				cav.setLineDash([3, 2]);
				cav.strokeStyle = "#fff";
				cav.stroke();

				//圆球中横线
				cav.beginPath();
				cav.moveTo(0, circleRadioYPosition);
				cav.lineTo(canvas.clientWidth, circleRadioYPosition);
				cav.lineWidth = 2;
				cav.setLineDash([3, 2]);
				cav.strokeStyle = "#fff";
				cav.stroke();

				//绘制交汇圆球
				cav.beginPath();
				cav.arc(circlePointX, circleRadioYPosition, 4, 0, Math.PI * 2, false);
				cav.fillStyle = "#fff";
				cav.fill();

				//圆球外环
				cav.beginPath();
				cav.arc(
					circlePointX,
					circleRadioYPosition,
					(circleRadio * data[i].riskNumber) / dataMax + 5,
					0,
					Math.PI * 2,
					false
				);
				cav.strokeStyle = "#fff";
				cav.lineWidth = 1;
				cav.setLineDash([1, 0]);
				cav.stroke();

				if (
					circleRadioYPosition + floatBG.height >=
					canvasBGHeight
				) {
					var floatBGPositionY =
						circleRadioYPosition - floatBG.height;
				} else {
					var floatBGPositionY =
						circleRadioYPosition - floatBG.height / 2;
				}

				var floatBGWidth =
					(floatBG.width * data[i].riskName.length) / 10 + 20;
				if (index < 3) {
					var floatBGPositionX = circlePointX + 5;
				} else {
					var floatBGPositionX = circlePointX - floatBGWidth - 5;
				}
				var floatLineColor = cav.createLinearGradient(
					floatBGPositionX + 10,
					floatBGPositionY + floatBG.height / 2 - 10,
					floatBGPositionX + floatBGWidth + 5,
					floatBGPositionY + floatBG.height / 2 - 10
				);
				floatLineColor.addColorStop(0, "rgba(255, 255, 255,0)");
				floatLineColor.addColorStop(1, "rgba(255, 255, 255,1)");
			} 
			circlePointX += canvas.clientWidth / data.length*3/4;
			startRowLinePosition += canvas.clientWidth /  data.length*3/4;
		}
		//弹出框
		cav.drawImage(
			floatBG,
			floatBGPositionX,
			floatBGPositionY,
			floatBGWidth,
			80
		);

		//弹框分割线
		cav.beginPath();
		cav.moveTo(
			floatBGPositionX + 10,
			floatBGPositionY + floatBG.height / 2 - 10
		);
		cav.lineTo(
			floatBGPositionX + floatBGWidth - 10,
			floatBGPositionY + floatBG.height / 2 - 10
		);
		cav.setLineDash([2, 1]);
		cav.strokeStyle = floatLineColor;
		cav.stroke();
		//弹框文字
		cav.textAlign = "start";
		cav.textBaseline = "bottom";
		cav.font = "16px MeicrosoftYahei";
		cav.fillStyle = "#fff";
		cav.fillText(
			data[index].riskName,
			floatBGPositionX + 10,
			floatBGPositionY + floatBG.height / 2 - 15
		);

		cav.textAlign = "start";
		cav.textBaseline = "top";
		cav.font = "bold 36px Akrobat-Black";
		cav.fillStyle = "#fff";
		cav.fillText(
			data[index].riskNumber + "%",
			floatBGPositionX + 10,
			floatBGPositionY + floatBG.height / 2 - 5
		);
	}
前端canvas项目实战——在线图文编辑器：序
石沉溪洞
05-21 1205
这个专栏，我将带领大家从入门HTML5中的Canvas，到最终实现一个精美的在线图文编辑器。我的初心没有变，就像几年以前，我在自己苦苦摸索实现之后，写下一篇篇博文，想要让初学者们在学习Java Web的道路上少走一些弯路一样。
HTML5 Canvas水波纹气泡特效.zip
07-04
HTML5 Canvas水波纹气泡特效是一款基于jQuery Canvas实现的水波纹动画特效。
canvas做一个简单气泡图
weixin_34167819的博客
03-26 1381
数据结构:[{ name: '土豆', num: 200, }, { name: '西瓜', num: 80, }, { name: '黄瓜', num: 85, }, { name: '粉丝', num: 70, }, { name: '苹果', num: 75, }, { name: ...
用Python绘制专业气泡图：逐行代码详解（学画图第一天）
最新发布
2401_84301183的博客
03-14 1072
本文将通过的方式，手把手教你用Python的Matplotlib库绘制商业级气泡图。每个代码块都包含详细的功能解析，即使零基础也能轻松掌握！
canvas绘制气泡
diaoting2815的博客
12-01 463
思路：使用Math.random()函数绘制是个不同位置，大小，颜色的圆形，然后设置定时器，前一个状态用一个与画布相同颜色的背景图片进行覆盖，改变圆形的位置，每次改变都是在这张空白的背景图片上面重新进行重新绘制的过程 源码： <!doctype html><html><head> <title>test</title>...
微信小程序利用Canvas实现气泡动态效果
ZWH的博客
03-20 718
利用微信小程序的Canvas画布实现。
canvas绘制随机移动的气泡
hb707934728的博客
03-30 3713
Bouncing Balls body { background: #dddddd; } #canvas { margin-left: 10px; margin-top: 10px; background: #ffffff;
微信小程序小组件 基于Canvas实现直播点赞气泡效果
08-31
主要为大家详细介绍了微信小程序小组件，基于Canvas实现直播点赞气泡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML5 Canvas气泡背景特效
06-24
在这个“HTML5 Canvas气泡背景特效”中，我们主要关注的是如何使用Canvas API来创建一种动态的、带有渐变效果的气泡动画背景，并实现颜色在四种颜色之间的平滑过渡。 首先，我们要理解Canvas的基本用法。...
词云气泡图canvas版
09-13
词云气泡图canvas版
使用Canvas扩展绘制动态ASP.NET Core Blazor气泡图
04-11
如何使用HTML5 Canvas使用ASP.NET Core Blazor Web应用程序绘制我们自己的气泡图
html5 canvas绘制圆形气泡背景动画特效
09-08
html5 canvas绘制圆形气泡背景动画特效
html5 canvas绘制梦幻气泡背景动画特效
06-11
html5 canvas绘制梦幻气泡背景动画特效，大小不一的圆形气泡在网页上漂浮动画效果。
HTML5 Canvas气泡背景特效.zip
07-05
HTML5 Canvas气泡背景特效是一款带渐变效果的气泡动画背景效果，并且背景颜色能在4种颜色间平滑过渡转换。、
raphael 手绘SVG气泡图
03-26
用raphael svg 绘制气泡图，每个气泡不重叠并且位置随机
canvas之动态气泡效果
qq_31207499的博客
07-24 7230
利用canvas和三角函数做了一个简单的起泡效果，每个气泡的圆形都是随机生成的，且气泡线上浮动的路径为三角函数曲线，步骤如下： 1、设置一个循环定时器，随机生成每个圆形的圆心坐标、半径等数据，存储在数组arr中； 2、设置一个循环定时器，取出arr中每个圆的数据； 3、利用一个for循环，通过操作x,y等来实现动画效果，因为canvas中无法直接操作绘制的图形，所以通过不断地清空画布...
canvas实现酷炫气泡效果
dianzhigan6636的博客
05-09 631
canvas实现动画主要是靠设置定时器（setinterval（））和定时清除画布里的元素实现，canvas动画上手很简单，今天可以自己动手来实现一个酷炫气泡效果。 气泡炸裂效果（类似水面波纹） 代码如下： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8">...
H5Canvas画彩色泡泡
s1124yy
02-07 816
视频链接 —— 代码链接 知识 要用企业级开发思想，为有利于后期维护写代码，封装好变量，不要让外部使用。 BUG 直接最大化，有滚动条 不能像我想像的那样，写个h1在上面 泡泡由鼠标移动产生。效果截图：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IsQtion

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值