Ext扩展饼图组件

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

[javascript]
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)
&n

补充：web前端 , JavaScript ,