纯HTML5 Canvas实现的饼图

最新推荐文章于 2023-04-10 17:46:17 发布
最新推荐文章于 2023-04-10 17:46:17 发布
阅读量1.1k 收藏 7
点赞数
文章标签： 前端 ViewUI

基本思路：

主要是利用HTML5 Canvas实现饼图绘制，绘制弧度的API主要是使用

context.arc与lineto两个API。

实现的功能有：

1. 支持标签Legend显示或者隐藏

2. 首次载入动画效果

3. 鼠标tooltip效果

4. 自定义饼图大小与是否添加文字

效果如下：


调用代码：

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">
<script src="js/fishcomponent.js"></script>
<script src="js/pie.js"></script>
<title>My Demo 1</title>
	<script>
	window.onload = function() {
		var canvas = document.getElementById("pie_canvas");
		var seriesData = [{name:"apples", value:150, color:"RGBA(255,0,0,1)"},
		              {name:"orange", value:100, color:"RGBA(255,255,0,1)"},
		              {name:"banana", value:80, color:"RGBA(255,0,255,1)"},
		              {name:"peaches", value:60, color:"RGBA(0,255,255,1)"},
		              {name:"strawberries", value:40, color:"RGBA(0,127,255,1)"}]
		var config = {
				width : 600, 
				height: 400,
				series: seriesData,
				canvas: canvas,
				unit: "kg",
				title:"Fruit Sales",
 				tooltips : {
					enable : true
				},
				animation :{
					enable: true
				},
			    legend : {
			    	enable : true
			    },
			    text : {
			    	enable: true
			    },
		};
		pieChart.initSettings(config);
		pieChart.render();
	}
	</script>
</head>
<body>
<h1>Pie Chart Demo</h1>
<div id="my_container" style="width:600px; height:500px;">
	<canvas id="pie_canvas"></canvas>
</div>
<div id="btn-group">
	<button type="button" id="clear-button">Clear Plot</button>
	<button type="button" id="refresh-button">Draw Plot</button>
</div>
</body>
</html>

饼图JS的代码：

var pieChart = {
    width: 600,
    height: 400,
    series: [],
    unit: "kg",
    chartCanvas: null,
    selectable : true,
    title: "Pie Chart",
    legend : {
    	enable : true
    },
    edge : {
    	width: 50,
    	height: 50
    },
    animation: {
    	enable: true,
    	animCanvas : null,
    	hh: 1, // trick is here!! for animation play
    	pctx: null
    },
    tooltips: {
    	enable: true,
    	tooltipCanvas : null,
    	ttContext: null,
    	index: -1
    },
    circle : {
    	cx: 0,
    	cy: 0,
    	radius: 0
    	
    },
    text : {
    	enable: false,
    	content:[]
    },
    
    initSettings: function (config) {
    	this.chartCanvas = config.canvas;
    	this.chartCanvas.width = config.width;
    	this.chartCanvas.height = config.height;
        this.width = config.width;
        this.height = config.height;
        this.series = config.series;
        this.title = config.title;
        this.unit = config.unit;
        if(config.tooltips != undefined) {
        	this.tooltips.enable = config.tooltips.enable;        	
        }
        if(config.animation != undefined) {
        	this.animation.enable = config.animation.enable;        	
        }
        if(config.legend != undefined) {
        	this.legend.enable = config.legend.enable;        	
        }
        if(config.text != undefined) {
        	this.text.enable = config.text.enable;
        }
    },
    
    render : function() {
    	// initialization circle
    	this.circle.cx = this.width/2;
    	this.circle.cy = this.height/2;
    	this.circle.radius = Math.min(this.width/2, this.height/2) - Math.max(this.edge.width, this.edge.height);
    	var ctx = null;
    	if(this.animation.enable) {
    		this.animation.animCanvas = document.createElement("canvas");
        	this.animation.animCanvas.width = this.width;
        	this.animation.animCanvas.height = this.height;
        	ctx = this.animation.animCanvas.getContext("2d");
    	} else {
    		ctx = this.chartCanvas.getContext("2d");
    		this.renderBorder(ctx);
    	}
    	
    	if(this.circle.radius <= 0) {
    		ctx.strokeText("Can not reader the chart, Circle is too small.");
    		return;
    	}
    	
    	// draw each arc according to data series 
    	var sum = 0;
    	var nums = this.series.length;
    	for(var i=0; i<nums; i++) {
    		sum += this.series[i].value;
    	}
    	
    	// draw title
    	ctx.font = '18pt Calibri';
    	ctx.fillText(this.title, this.width/2 - this.edge.width, 30);
    	ctx.save();
    	var deltaArc = 0;
    	for(var i=0; i<nums; i++) {
    		var precent = this.series[i].value/sum;
    		this.renderPie(ctx, i, precent, deltaArc);
    		deltaArc += 2*Math.PI * precent;
    	}
    	ctx.restore();
    	
    	// add blur shadow
    	ctx.save();
    	ctx.shadowColor = "black";
    	ctx.shadowOffsetX = 0;
    	ctx.shadowOffsetY = 0;
    	ctx.shadowBlur = 10;
    	ctx.beginPath();
    	ctx.arc(this.circle.cx, this.circle.cy, this.circle.radius, 0, Math.PI * 2, false);
    	ctx.closePath();
    	ctx.lineWidth = 1;
    	ctx.strokeStyle = "RGBA(127,127,127,1)";
    	ctx.stroke();
    	ctx.restore();
    	
    	// render legend
    	ctx.save();
    	this.renderLegend(ctx, sum);
    	ctx.restore();
    	
    	// play animation
    	if(this.animation.enable) {
    		var parent = this;
    		this.animation.pctx = this.chartCanvas.getContext("2d");
    		this.renderBorder(this.animation.pctx);
    		setTimeout(function() {parent.playAnimation(parent);}, 1000/20);   	    		
    	}
    },
    
    showTooltips : function(loc, ctx) {
    	if(!this.tooltips.enable) {
    		return;
    	}
    	var dx = loc.x - this.width/2;
    	var dy = loc.y - this.height/2;
    	var dis = Math.floor(Math.sqrt(dx * dx + dy * dy));
    	if(dis <= this.circle.radius) {
    		// draw tool tip text
    		var angle = Math.atan2(dy,dx);
    		if(angle <= 0) {
    			// if[-Math.PI, 0], make it[Math.PI, 2*Math.PI]
    			angle = angle + 2*Math.PI;
    		}
    		
        	var sum = 0;
        	var nums = this.series.length;
        	for(var s=0; s<nums; s++) {
        		sum += this.series[s].value;
        	}
        	
        	var deltaArc = 0;
        	var index = 0;
        	for(var i=0; i<nums; i++) {
        		var precent = this.series[i].value/sum;
        		deltaArc += 2*Math.PI * precent;
        		if(angle<=deltaArc) {
        			index = i;
        			break;
        		}
        	}
    		if(this.tooltips.tooltipCanvas == null) {
    			this.tooltips.tooltipCanvas = document.createElement("canvas");
    			this.tooltips.ttContext = this.tooltips.tooltipCanvas.getContext("2d");
        		this.tooltips.tooltipCanvas.width = 150;
        		this.tooltips.tooltipCanvas.height = 100;
    		} 
    		
    		// only draw once
    		// if(index == this.tooltips.index){
    		// 	return;
    		// }
    		this.clearTooltips(ctx);
    		
    		this.tooltips.index = index;
    		var m_context = this.tooltips.ttContext;
    		m_context.save();
    		m_context.clearRect(0, 0, this.tooltips.tooltipCanvas.width, this.tooltips.tooltipCanvas.height);
    		m_context.lineWidth = 2;
    		m_context.strokeStyle = this.series[index].color;
    		m_context.fillStyle="RGBA(255,255,255,0.7)";
    		// m_context.strokeRect(2, 2, this.tooltips.tooltipCanvas.width-4, this.tooltips.tooltipCanvas.height-4);
    		// m_context.fillRect(2,2,this.tooltips.tooltipCanvas.width-4, this.tooltips.tooltipCanvas.height-4);
    		m_context.roundRect(2,2,this.tooltips.tooltipCanvas.width-4, this.tooltips.tooltipCanvas.height-4, 5, true, true);
			m_context.font="14px Arial";
			m_context.fillStyle="RGBA(0,0,0,1)";
			m_context.fillText("Index: " + (index + 1), 5, 20);
			m_context.fillText(this.series[index].name + ": " + this.series[index].value + this.unit, 5, 40);
			m_context.fillText(this.series[index].precent, 5, 60);
			m_context.restore();
			
			// make tool-tip rectangle is always visible 
			if((loc.x + this.tooltips.tooltipCanvas.width)> this.width) {
				loc.x = loc.x - this.tooltips.tooltipCanvas.width;
			}
			if((loc.y - this.tooltips.tooltipCanvas.height) <= 0) {
				loc.y = loc.y + this.tooltips.tooltipCanvas.height;
			}
			ctx.drawImage(this.tooltips.tooltipCanvas, 0, 0, this.tooltips.tooltipCanvas.width, this.tooltips.tooltipCanvas.height, 
					loc.x, loc.y-this.tooltips.tooltipCanvas.height, this.tooltips.tooltipCanvas.width, this.tooltips.tooltipCanvas.height);	
    	} else {
    		this.tooltips.index = -1;
    		this.clearTooltips(ctx);
    	}
    },
    
    clearTooltips : function(ctx) {
		ctx.clearRect(0,0,this.width, this.height);
		this.renderBorder(ctx);
		ctx.drawImage(this.animation.animCanvas, 0, 0, this.width, this.height, 0, 0, this.width, this.height); 
    },
    
    renderBorder : function(ctx) {
		ctx.save();
		ctx.fillStyle="white";
		ctx.strokeStyle="black";
		ctx.fillRect(0, 0, this.width, this.height);
		ctx.strokeRect(0, 0, this.width, this.height);
		ctx.restore();
    },
    
    renderPie : function(ctx, index, precent, deltaArc) {
    	var endAngle = deltaArc + 2*Math.PI*precent;
    	ctx.beginPath();
    	ctx.arc(this.circle.cx, this.circle.cy, this.circle.radius, deltaArc, endAngle, false);
    	ctx.moveTo(this.circle.cx, this.circle.cy);
    	ctx.lineTo(this.circle.cx + this.circle.radius * Math.cos(deltaArc), this.circle.cy + this.circle.radius * Math.sin(deltaArc));
    	ctx.lineTo(this.circle.cx + this.circle.radius * Math.cos(endAngle), this.circle.cy + this.circle.radius * Math.sin(endAngle));
    	ctx.lineTo(this.circle.cx, this.circle.cy);
    	ctx.closePath();
    	ctx.fillStyle = this.series[index].color;
    	ctx.fill();
    	
    	// render text content
    	if(this.text.enable) {    		
    		var halfEndAngle = deltaArc + Math.PI*precent;
    		var hx = this.circle.cx + this.circle.radius * Math.cos(halfEndAngle);
    		var hy = this.circle.cy + this.circle.radius * Math.sin(halfEndAngle);
    		ctx.beginPath();
    		ctx.moveTo(hx, hy);
    		var linePos = (hx < this.circle.cx) ? (hx - this.edge.width) : (hx + this.edge.width);
    		ctx.lineTo(linePos, hy);
    		ctx.closePath();
    		ctx.strokeStyle="black";
    		ctx.stroke();
    		var textPos = (hx < this.circle.cx) ? (hx - this.edge.width*2) : (hx + this.edge.width);
    		precent = Math.round (precent*100) / 100;
    		var size = this.text.content.length;
    		var tipStr = (size > index) ? this.text.content[index] : this.series[index].name + ": " + (precent * 100).toFixed(0) + "%";
    		ctx.font = '10pt Calibri';
    		ctx.fillStyle="black";
    		ctx.fillText(tipStr, textPos, hy);
    	}
    },
    
    renderLegend : function(ctx, sum) {
    	if(!this.legend.enable) return;
    	var nums = this.series.length;
    	ctx.font = '10pt Calibri';
    	var pos = (this.width/2 > (this.circle.radius+50)) ? 50 : (this.circle.cx - this.circle.radius);
    	for(var i=0; i<nums; i++) {
    		var x = this.series[i].value/sum;
    		x = Math.round (x*100) / 100;
    		var tipStr =  this.series[i].name + ": " + (x * 100).toFixed(0) + "%";
    		this.series[i].precent = tipStr;
    		ctx.fillStyle = this.series[i].color;
    		ctx.fillRect(pos - 40, 20*i+10, 10, 10);
        	ctx.fillStyle = "black";
    		ctx.fillText(tipStr, pos - 25, 20*i+20);
    	}    	
    },
    
    playAnimation : function(parent) { 	
    	if(parent.animation.hh < parent.height) {
    		parent.animation.pctx.save();
    		parent.animation.pctx.globalAlpha=0.5;
    		parent.animation.pctx.clearRect(0,0,parent.width, parent.height);
    		parent.renderBorder(parent.animation.pctx);
    		parent.animation.pctx.drawImage(parent.animation.animCanvas, 0, 0, parent.width, this.animation.hh, 0, 0, parent.width, this.animation.hh);
    		parent.animation.hh = parent.animation.hh + 10;
    		parent.animation.pctx.restore();    	    		
    		setTimeout(function() {parent.playAnimation(parent);}, 1000/20); 
    	} else {
    		parent.animation.pctx.clearRect(0,0,parent.width, parent.height);
    		parent.renderBorder(parent.animation.pctx);
    		parent.animation.pctx.drawImage(parent.animation.animCanvas, 0, 0, parent.width, parent.height, 0, 0, parent.width, parent.height);
    		
    		// enable tool-tip functionality
        	if(parent.animation.enable && parent.legend.enable) {
        		parent.chartCanvas.addEventListener('mousemove', function(event) {
    	    		var x = event.pageX;
    	    		var y = event.pageY;
    	    		var canvas = event.target;
    	    		var bbox = canvas.getBoundingClientRect();
    	    		var loc = { x: x - bbox.left * (canvas.width  / bbox.width),
    	    				y: y - bbox.top  * (canvas.height / bbox.height)};
    	    		
    	    		parent.showTooltips(loc, (parent.animation.enable ? parent.animation.pctx : ctx));
    	        }, false);
        	}
    	}
    },
    
};
源代码可以直接使用
iteye_18480
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【echarts】使用 ECharts 绘制3D饼图
九日的博客
04-16 7257
一步步教你使用echarts绘制一个3D饼状图。
用canvas绘制饼图
12-15
主要是利用HTML5 Canvas实现饼图绘制，绘制弧度的API主要是使用 context.arc与lineto两个API。 实现的功能有： 1. 支持标签Legend显示或者隐藏 2. 首次载入动画效果 3. 鼠标tooltip效果 4. 自定义饼图大小与是否添加文字
canvas-饼图
AsaZyf的博客
09-21 250
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;&lt;/title&gt;     &lt;style&gt;         canvas{             border: 1px
使用canvas绘制饼状图
一只前端小白的博客
03-07 6131
理论基础： 绘制饼状图之前，需要对操作canvas的方法有一定的了解 绘制的过程中还会涉及到数学中的弧度计算和三角函数… 分析： 1、确定从圆心伸出去的线=半径+伸出去的距离(自定义) 2、对边 即y轴方向的长度=斜边* sin(角度) 3、临边 即x轴方向的长度=斜边 * cos(角度) 4、伸出去点的横纵坐标 x=原点横坐标+(半径+超出饼状图的长度)*cos(角度) y=远点纵坐标+(半径...
canvas绘制饼状图
阳神
02-15 375
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; ...
JavaScript练手小技巧：用Canvas绘制饼图
九天翔龙的技术博客
12-09 1007
饼图是数据可视化很重要的一个组成部分。这个案例虽然没有 Echarts 那么好看，但是作为了解Canvas的基础案例，还是很有必要练习下。
html5 canvas简单封装一个echarts实现不了的饼图
09-27
总结来说，HTML5 Canvas API为我们提供了丰富的图形绘制能力，使得开发者可以自由地创建各种定制化的图表，包括文中所述的ECharts无法直接实现的饼图。理解并熟练掌握Canvas API，对于创建独特且富有表现力的数据...
原生canvas实现扇形图饼图封装
07-01
总的来说，原生canvas实现的扇形图和饼图封装涉及到HTML、CSS和JavaScript的交互，以及canvas API的灵活运用。熟练掌握这些技能，可以帮助开发者创建出具有吸引力的数据可视化界面，让复杂的数据更易于理解和分析。...
html5 canvas饼图统计图表效果.rar
07-10
html5 canvas饼图统计图表效果，配合jquery实现的，鼠标悬停于图上时会动态突出显示的饼形图。圆饼图和右侧的列表数据是对应的，用鼠标点击右侧的选项，左侧饼形图的对应部分会向外突出显示，这样便于清楚的看出所...
html5 canvas动态的饼状图动画特效
06-24
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行图形绘制，提供了丰富的绘图API，可以实现各种动态的视觉效果。在本案例中，“html5 canvas动态的饼状图动画特效”就是利用Canvas API创建的一种...
jquery html5 图表用canvas绘制一个动画圆形饼图
09-08
在这个场景中，我们将深入探讨如何使用jQuery和HTML5 Canvas绘制一个动画的圆形饼图。 首先，我们需要在HTML页面中引入jQuery库和Canvas元素。HTML代码可能如下： ```html <!DOCTYPE html> <html lang="zh"> ...
Canvas弧形进度条
qq_40289557的博客
06-11 925
在可视化应用中，弧形进度条应用也比较广泛，在“SVG绘制圆环进度条”和“线形进度条的几种实现方式”这两章之后，今天针对平时开发中关于弧形进度条的实现方案进行一个总结，结合Javascript面向对象的开发方式，参考echarts的实现方式，封装一个可复用、个性化的弧形进度条组件.........
使用H5的canvas绘制饼状图
weixin_44823731的博客
05-12 876
前言：在我们写网站，我们往往都想要向用户展示一些数据，比如访问数，文章的点击数等等。如果我们只是用数字来向用户展示的，用户很可能会感觉到枯燥，因为数据的显示实在使太单一的。所以今天我来教大家来用H5的画布api来绘制饼状图，让你的网站更加高大上。 直接进入正题，先展示成果和源码。 最终结果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
用原生js手写 canvas饼状图
Jacky的博客
01-08 4717
一、canvas是什么？     百度的定义：Canvas 通过 JavaScript 来绘制 2D图形。Canvas 是逐像素进行渲染的。开发者可以通过javascript脚本实现任意绘图。百度上的定义基本描述的什么是canvas，然而要补充的一点是，canvas现在只能支持2d渲染，它最早是由苹果在webkit的浏览器使用到canvas，由于实用性，逐渐被各个浏览器所支持，二、canvas本...
原生CANVAS语法实现的封装折线图和饼图
qq_23539691的博客
06-23 573
介绍 首先canvas是html5的一种新标签，代表一个画布，可以在上面进行绘画、动画等操作。画布默认大小是300*150。 canvas标签本生就是一个只是画布，可以导出为透明背景的png图片。要实现上面有文字、线条等呈现，需要使用js实现。总之，画布上一切的呈现，都需要使用js来实现。 画布大小不能使用样式控制，用样式调整的是一个可视区域，其实真实的大小，还是一样的，只是在画布上画内容的话，会等比例放大。调整画布大小，需要在标签上直接添加width和height属性。 canvas标签也是可以放文字的，
H5使用canvas绘制饼状图
weixin_42560017的博客
07-16 561
1.在HTML中引入Canvas标签 <canvas class="pie-chart" width="850" height="500" ></canvas> 2.引入单独的js文件 let PieChart = function(selector, options){ let canvas = "string" === typeof selector ? do...
canvas 插件_保姆级教程ECharts图表插件一文搞懂！
weixin_39966130的博客
11-27 319
黑马程序员视频库播妞QQ号：3077485083传智播客旗下互联网资讯、学习资源免费分享平台在前端项目开发中，有很多地方会遇到绘制图表的需求，一般的图表可以通过canvas来绘制，但是遇到复杂一点的图表怎么办呢？不要慌，今天就给大家推荐一个前端大佬们用的非常火的图表插件——ECharts。ECharts特性简介ECharts是一个使用 JavaScript 实现的开源可视化库 ，啥叫...
Canvas绘制评分网格图表
qq_43225508的博客
04-10 245
Canvas绘制评分网格图表
canvas实现一个pie
空谷足音的博客
06-26 514
1. 效果图 2. 具体实现 这里面会设计到数学的知识，如三角函数，弧度和角度的转换等，需要注意的是： 数学的0°从12点开始，弧度0是从3点开始。 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></tit...
前端html 饼图
最新发布
05-24
要制作一个前端 HTML 饼图，你可以使用 HTML5 的 canvas 元素和 JavaScript 来实现。下面是一个简单的例子： HTML 代码： ```html <canvas id="pie-chart" width="400" height="400"></canvas> ``` JavaScript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值