当前位置:编程学习 > JAVA >>

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 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,