canvas自画图表chart,pieChart

最新推荐文章于 2024-05-14 02:27:52 发布
最新推荐文章于 2024-05-14 02:27:52 发布
阅读量1.2k 收藏
点赞数
分类专栏： JS HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010869754/article/details/51149702
版权
JS 同时被 3 个专栏收录
6 篇文章 0 订阅
订阅专栏
CSS
4 篇文章 0 订阅
订阅专栏
HTML
2 篇文章 0 订阅
订阅专栏 

先上效果图，后面是html文件+js文件
<img src="https://img-blog.csdn.net/20160414104825165?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" height="376" width="241" alt="" />
 利用canvas自绘图表，可以通过更改js里面的参数发表图表样式
<img src="https://img-blog.csdn.net/20160414104558131?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" height="393" width="248" alt="" />
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!--<link rel="stylesheet" href="css/test.css" />-->
		<title>canvas</title>
	</head>

	<body>
		<p>自画canvas</p>
		<div id="chart"></div>\
		<div id="pieChart"></div>
	</body>
		<script src="js/plugin.js" type="text/javascript" charset="utf-8"></script>
</html>

var plugs=(function(){

		var		config = {
					chartStyle: {
						width: 260,
						height: 200
					},
					origin: {
						x: 5,
						y: 20,
					},
					axisY: {
						marginLeft: 25
					},
					bar: {
						radius: 2.5,
					}
				};

				rateArray = [{
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}];

				var canvasP = document.getElementById("chart");
				var canvas = document.createElement("canvas");
				canvas.width = 300;
				canvas.height = 250;
				canvasP.appendChild(canvas);
				var cxt = canvas.getContext('2d');

				cxt.beginPath();
				cxt.moveTo(config.axisY.marginLeft, config.origin.y);
				cxt.lineTo(config.axisY.marginLeft, config.chartStyle.height - 3 + config.origin.y);
				cxt.lineTo(config.chartStyle.width + config.axisY.marginLeft, config.chartStyle.height - 3 + config.origin.y);
				cxt.stroke();
				//横坐标
				for (var i = 0; i < 4; i++) {
					cxt.beginPath();
					cxt.moveTo(i * config.chartStyle.width / 3 + config.axisY.marginLeft, config.chartStyle.height - 3 + config.origin.y);
					cxt.lineTo(i * config.chartStyle.width / 3 + config.axisY.marginLeft, config.chartStyle.height + 2 + config.origin.y);
					switch (i) {
						case (0):
							var time = '00:00';
							break;
						case (1):
							var time = '08:00';
							break;
						case (2):
							var time = '16:00';
							break;
						case (3):
							var time = '24:00';
							break;
					}
					cxt.font = '12px Arial';
					cxt.globalAlpha = 0.5;
					cxt.fillText(time, i * config.chartStyle.width / 3 + config.origin.x, config.chartStyle.height + 15 + config.origin.y);
					cxt.stroke();
				}

				//				纵坐标
				for (var i = 0; i < 6; i++) {
					cxt.beginPath();
					cxt.font = '12px Arial';
					cxt.globalAlpha = 0.5;
					cxt.fillText(30 + 20 * i, 0, (config.chartStyle.height - 3) * (5 - i) / 5 + config.origin.y);
					cxt.stroke();
				}

				//			画柱状图
				for (var i = 0; i < 24; i++) {
					//					柱子
					var jjj = i + 1;
					cxt.fillStyle = "#EFEFEF";
					cxt.globalAlpha = 1;
					cxt.fillRect(jjj * config.chartStyle.width / 24 + config.axisY.marginLeft - config.bar.radius, config.chartStyle.height - 3 - (rateArray[i].valueL - 30) * 1.97 - config.bar.radius + config.origin.y, 2 * config.bar.radius, (rateArray[i].valueL - rateArray[i].valueS) * 1.97);

					//					柱子上圆
					if (rateArray[i].valueL == 0) {
						cxt.globalAlpha = 0;
						cxt.fillStyle = "#FFFFFF";
					} else {
						cxt.fillStyle = "#FD3869";
					}
					cxt.beginPath();
					var j = i + 1;
					cxt.arc(j * config.chartStyle.width / 24 + config.axisY.marginLeft, config.chartStyle.height - 3 - (rateArray[i].valueL - 30) * 1.97 - config.bar.radius + config.origin.y, config.bar.radius, 0, Math.PI * 2, true);
					cxt.closePath();
					cxt.fill();

					//					柱子下圆
					if (rateArray[i].valueL == 0) {
						cxt.globalAlpha = 0;
						cxt.fillStyle = "#FFFFFF";
					} else {
						cxt.fillStyle = "#FDD00A";
					}
					cxt.beginPath();
					var jj = i + 1;
					cxt.arc(jj * config.chartStyle.width / 24 + config.axisY.marginLeft, config.chartStyle.height - 3 - rateArray[i].valueS - config.bar.radius + config.origin.y, config.bar.radius, 0, Math.PI * 2, true);
					cxt.closePath();
					cxt.fill();

				}
				
				

				var canvasP = document.getElementById("pieChart");
				var canvas = document.createElement("canvas");
				canvas.width = 320;
				canvas.height = 150;
				canvasP.appendChild(canvas);
				var cxt = canvas.getContext('2d');

				var data_arr = [0.15, 0.25, 0.6];
				var color_arr = ["#84d0e8", "#3399ff", "#007aff"];
				var text_arr = ["心率正常:60-100bmp", "心率过缓:<60bpm", "心率过速心动过速:>100bmp"];

				var pi2 = Math.PI * 2;
				var c = canvas.getContext("2d");
				c.font = "12px Times New Roman";
				var startAgl = 0;
				var agl;
				for (var i = 0; i < data_arr.length; i++) {
					//绘制饼图
					c.setanti
					agl = data_arr[i] * pi2 + startAgl;
					c.fillStyle = color_arr[i];
					c.beginPath();
					c.lineWidth = 1;
					c.moveTo(80.5, 80.5);
					c.arc(80.5, 80.5, 50, startAgl, agl, false);
					c.lineTo(80.5, 80.5);
					c.fill();
					startAgl = agl;
					//绘制图例
					c.lineWidth = 1;
					c.fillRect(160, 50 + 18 * i, 16, 16);
					c.fillStyle = "#000000";
					c.fillText(text_arr[i], 180.5, 62.5 + 18 * i);
				}

})();



注意事项：在重新绘图的时候一定要关闭之前的路径closePath()，否则新的路径可能会覆盖之前的

注：下一篇canvas模糊问题优化

Cykying
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas-chart:使用 canvas 元素制作图表（类分配）
06-26
画布图表 ####作者：德文库克 ###Description： <canvas>元素的高级用途来制作图形。 ###Instructions：查看网页时，两个画布元素分别显示一个图表： 顶部将显示饼图 底部会显示一个数字图表
canvas的Chart图表插件
liudanyang_21的博客
06-17 289
今天写页面页面需求到柱状图标，今天介绍一下我所用的Chart.js图表插件 官网：http://www.bootcss.com/p/chart.js/ 里面会有下载js文件和中文文档 一、接下来简单说一下用法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script sr...
2024年HTML5——Canvas图表插件 chart，牛逼
最新发布
2401_85012088的博客
05-14 559
Chart.js有两种不同的版本。常规版本的Chart.js和 Chart.min.js，附带chart.js库的同时还带着颜色解析器。如果你想使用这个版本并且在你的图表中使用时间轴，你需要在安装Chart.js之前安装上Moment.js。而另一个版本Chart.bundle.js 和Chart.bundle.min.js早就包含了Moment.js。你唯一需要注意的就是两个版本只能安装一个，否则会引起错误。
Canvas 实现绘制图表
weixin_33835690的博客
12-24 1357
这里用canvas实现了两个简单的图表，用到了canvas的基本用法，效果如下 新建 chart.js 文件，封装绘制方法 构造方法 function myChart(config){ this.width = config.width > 300 ? config.width : 200 //图表宽度 this.height ...
图表CanvasChartView（二）：手势滑动方案一
珠穆朗玛小王子的博客
05-08 1080
前言之前我们已经把canvas的绘制部分搞定了，现在最关键的就剩下手势滑动了，想到手势滑动，我第一个想到的是Scroller，什么也别说了，赶紧搞起来。正文因为手势滑动的功能和canvas没有什么直接的联系，为了防止我手贱误改了之前的功能，所以我们新建一个基类：BaseScrollerView，专门实现和手势移动有关的功能，然后让CanvasChart继承BaseScrollerView就完美了。...
echarts 基本使用
热门推荐
李双喆
08-28 11万+
最近项目中要做图形报表，要求使用echarts实现，图形报表有很多中实现之前也接触过，但echarts还是头一次听说，正好可以趁这个机会好好学习一下它。   之前不知道就不知道啦，现在知道了就了不得了，一下子喜欢上了echarts，今后项目中要是让做报表我肯定首选echarts在没有强制要求的前提下。主要是echarts太完美了：1，开源软件，无私的为我们提供漂亮的图形界面；2，使用简单，默默的
PieChart-master.zip
11-26
2. **图表(Chart)**: 图表是数据可视化的关键工具，饼状图是其中一种，它通过扇形区域的大小来代表各部分在总体中所占的比例。饼状图组件使得开发者能够直观地展示复杂数据，帮助用户理解数据间的相对大小和占比关系...
jquery html5 图表用canvas绘制一个动画圆形饼图
09-08
<canvas id="pieChart" width="400" height="400"></canvas> <script src="chart.js"> ``` 接下来，我们要在`chart.js`中编写JavaScript代码来绘制饼图。首先，我们需要获取Canvas元素并创建一个2D绘图上下文：...
livechart:可扩展的画布图表，用于实时数据显示
05-04
实时图表 画布图表，用于显示具有动画效果的动态数据。 特征 轻巧，缩小并压缩后<12k。 可缩放，当容器调整大小时，canvas元素...var PieChart = require ( 'livechart' ) . PieChart ; var parent = document . g
chart.js图表控件绘制饼状图曲线图走势图数据显示代码
11-08
Chart.js是一款轻量级的JavaScript库，用于在Web页面上绘制各种类型的图表，包括饼状图、曲线图和走势图。它的API简洁易用，适用于快速开发动态数据可视化应用。在这个项目中，我们将深入探讨如何使用Chart.js来创建...
原生canvas实现扇形图饼图封装
07-01
<canvas id="pieChart"></canvas> ``` 2. 获取canvas上下文：在JavaScript文件（如canvas-extension.js）中，我们需要获取到canvas的2D绘图上下文： ```javascript const canvas = document.getElementById('...
chart_canvas：尝试在画布上创建图表插件
02-14
chart_canvas：尝试在画布上创建图表插件
canvas 封装chart —— 绘制权重比例得分图
weixin_43972213的博客
12-15 1582
废话不多说，先整目标效果图 开发需求：期望上述完成效果图的组件封装 数据格式： // 其中颜色可传可不传，不传的话，按照封装的组件中，随机生成颜色 scores: [60, 60, 50, 20, 10, 32, 88], // 必须的 // 格式1 myOptions: { radius: 60, width: 300, height: 200, data: [ { weighting: 20, title: '语文' }, { weighti
利用canvas+Chart.js实现动态折线图
zyq19931019的博客
09-20 1万+
有用highcharts做动态折线图的源代码，但是看了太麻烦，也不好diy。因此决定在原有的canvas+charts.js的基础上做动态折线图。 第一步当然加载记得加载所需要的Chart.js 第二步是用js创建出canvas对象， this.canvas = document.createElement('canvas'); this.ctx = this.canvas.getConte
深入浅出CChart 每日一课——快乐高四第五课 梦想的天空，锦上添花之客户区自绘篇
baita96的专栏
12-22 3698
上节课笨笨给大家介绍了CChart的插件菜单功能，这属于定制功能，给了用户发挥的自由。本节课继续介绍CChart的定制功能，这节课的内容要实用得多，因为定制的是客户区。客户区自绘功能将给您插上理想的翅膀，飞上梦想的天空，呵呵。 完全的定制需要子类化功能，这个以后再介绍。本节课先介绍CChart提供的客户区自绘函数。 CChart类有以下两个成员函数。 void SetUserDrawi...
canvas实现一个pie
空谷足音的博客
06-26 515
1. 效果图 2. 具体实现 这里面会设计到数学的知识，如三角函数，弧度和角度的转换等，需要注意的是： 数学的0°从12点开始，弧度0是从3点开始。 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></tit...
canvas画环形 pie
web修理工
06-25 202
【代码】canvas画环形 pie。
HTML：利用canvas画定位图标
KaiSarH
05-20 1145
利用canvas画定位图标
Android Canvas练习(2)自已绘饼图(Pie Chart)
拙言的专栏
04-07 1万+
上文弄了个绘制报表的，有了报表，当然想一并也绘个饼图，柱形图之类的玩玩，看看了API，觉得应当很简单，饼图实现了下， 实现代码确实也很简单，Android的这些函数封装的确实好用。          效果图如下:               不过实现过程还是比较曲折的，首先碰到一个sdk的bug,drawTextOnPath()用法明明是对的，但老是不显示没效果，后面 才查到，这个
vue3 画echarts环形图表
06-03
<vue-echarts :options="options" :auto-resize="true" :renderer="'canvas'" :chart="chart"> export default { data() { return { chart: null, options: { title: { text: '环形图示例' }, tooltip...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值