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源码分析与开发实例宝典》