Ext扩张饼图组件 _Web前端

Ext扩展饼图组件

EXT就是JS模仿的Swing..swing的组件是JAVA2D画出来的，比较特殊的需要自己扩展的EXT组件也可以用canvas画出来

Ext.ns('Ext.ux');

Ext.ux.pieChart = Ext.extend(Ext.BoxComponent, {
    //绘制的位置
	  circleX: 0,
    circleY: 0,
    data: undefined,
    //标签
    labels: [],
    labelX: 0,
    labelY: 0,
    //配置半径
	  radius: 100,
	  //阴影偏移度
	  offset: 5,
    onRender: function(ct, position) {
        Ext.ux.pieChart.superclass.onRender.call(this, ct, position);
        this.ct = Ext.get(ct);
	    this.createCanvas(ct);
    },
    createCanvas: function(ct) {
       //创建画布  
       var canvas = document.createElement("canvas");
	     //放入渲染容器中
       this.ct.dom.appendChild(canvas);
       this.el = Ext.get(canvas);
       if (Ext.isIE && G_vmlCanvasManager) {
				 this.el = Ext.get(G_vmlCanvasManager.initElement(canvas));
                this.el = Ext.get(this.el);
       }          
		   this.setCanvasSize(this.width, this.height);
		   this.canvas = Ext.getDom(this.el);
		   this.el.position('absolute', this.zIndex);
		   this.ctx = this.getContext();
    },
    afterRender: function() {
	    Ext.ux.pieChart.superclass.afterRender.apply(this, arguments);
		    var context = this.ctx;
		    this.drawCircle(context);
	  },
    drawCircle: function(ctx) {
		//是否绘制阴影
		this.shadow ? this.makeShadow() : '';
		var total = 0;
		for (var i = 0; i < this.data.length; i++) {
		    total += this.data[i][1];
		}
		this.startangle = -Math.PI / 2;
		ctx.lineWidth = 2;
		ctx.strokeStyle = "black";
		for (var i = 0; i < this.data.length; i++) {
		    var d = this.data[i];
			//绘制结束角度
			this.endangle = this.startangle + d[1] / total * Math.PI * 2;
			//饼图一元素开始绘制
			ctx.beginPath();
			ctx.moveTo(this.circleX, this.circleY);
			ctx.arc(this.circleX, this.circleY, this.radius, 
					this.startangle, this.endangle, false);
			ctx.closePath();
			ctx.fillStyle = d[2];
			ctx.fill();
			//绘制包围线
			ctx.stroke();
			this.startangle = this.endangle;
			//绘制标签
			ctx.fillStyle = d[2];
                        //计算标签合适的位置
                        var labelX = this.circleX + this.radius + 50;
                        var labelY = this.circleY - this.data.length * 25 + i * 30;
			ctx.fillRect(labelX, labelY, 20, 20);
			ctx.strokeRect(labelX, labelY, 20, 20);
			//在容器下创建label
			var label = Ext.get(this.ct).createChild();
			label.position('absolute');
			label.setLeftTop(this.labelX + 30, this.labelY + 30 * i - 4);
			label.dom.innerHTML = this.labels[i] || d[0];
		}
	},
	makeShadow: function() {
	    var c = {
		    x: this.circleX,
			y: this.circleY,
			r: this.radius
		}
		//绘出阴影
		this.ctx.arc(c.x + this.offset, c.y + this.offset, c.r, 0, Math.PI * 2, false)
		this.ctx.closePath();
		this.ctx.fillStyle ='#555555';
		this.ctx.fill();
	},
	getContext : function() {
		return this.el.dom.getContext("2d");
	},
	setCanvasSize : function(w, h) {
		this.el.setSize(w, h);
		this.el.set({
			width : w,
			height : h
		});
	}
});

使用方法

<html>
	<head>				
		<link rel="stylesheet" type="text/css"
			href="extjs/resources/css/ext-all.css"/>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
		<script type="text/javascript"	src="extjs/adapter/ext/ext-base.js"></script>
	    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>			
		<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>	
			
		<script type="text/javascript" src="excanvas.js"></script>
		<script type="text/javascript" src="javascript/pieChart1.js"></script>
	</head>
        <script type="text/javascript">
          Ext.onReady(function() {
	var pie = new Ext.ux.pieChart( {
		width : 600,
		height : 400,
		shadow : true,
		data : [['spring', 25, 'red'], ['summer', 28, 'blue'],
				['fall', 28, 'yellow'], ['winner', 29, 'green']],
		circleX : 200,
		circleY : 200,
		radius : 150,
                offset: 10
	});
	pie.render('pie');
});

效果

参考资料《ExtJS源码分析与开发实例宝典》

1楼cizhibr前天 21:20: 你这个饼图很有创意