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 ,