纯HTML5Canvas实现的饼图-创新互联

基本思路：

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

context.arc与lineto两个API。

实现的功能有：

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

2. 首次载入动画效果

3. 鼠标tooltip效果

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

效果如下：

调用代码：

      	   
Pie Chart Demo
 
 	 
 
 	Clear Plot 	Draw Plot 
  

饼图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 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源代码可以直接使用
另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
                

                当前文章：纯HTML5Canvas实现的饼图-创新互联                

                本文路径：http://dzwzjz.com/article/edgpi.html