Ext extension pie chart component

EXT is the Swing .. swing component imitated by JS. It is drawn by JAVA2D. You can use canvas to draw a special EXT component that requires extension.

[Javascript]
Ext. ns ('ext. ux ');
 
Ext. ux. pieChart = Ext. extend (Ext. BoxComponent ,{
// Position of the image
CircleX: 0,
CircleY: 0,
Data: undefined,
// Tag
Labels: [],
LabelX: 0,
LabelY: 0,
// Configure the radius
Radius: 100,
// Shadow offset
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 ){
// Create a canvas
Var canvas = document. createElement ("canvas ");
// Put it in the rendering container
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 ){
// Specifies whether to draw a shadow.
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];
// Draw the end angle
This. endangle = this. startangle + d [1]/total * Math. PI * 2;
// Create a pie chart with an element
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 ();
// Draw the surround line
Ctx. stroke ();
This. startangle = this. endangle;
// Draw labels
Ctx. fillStyle = d [2];
// Calculate the proper tag location
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 );
// Create a label under the container
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
}
// Draw shadows
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
});
}
});

Ext. ns ('ext. ux ');

Ext. ux. pieChart = Ext. extend (Ext. BoxComponent ,{
// Position of the image
CircleX: 0,
CircleY: 0,
Data: undefined,
// Tag
Labels: [],
LabelX: 0,
LabelY: 0,
// Configure the radius
Radius: 100,
// Shadow offset
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 ){
// Create a canvas
Var canvas = document. createElement ("canvas ");
// Put it in the rendering container
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 ){
// Specifies whether to draw a shadow.
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];
// Draw the end angle
This. endangle = this. startangle + d [1]/total * Math. PI * 2;
// Create a pie chart with an element
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 ();
// Draw the surround line
Ctx. stroke ();
This. startangle = this. endangle;
// Draw labels
Ctx. fillStyle = d [2];
// Calculate the proper tag location
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 );
// Create a label under the container
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
}
// Draw shadows
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
});
}
}); Usage

[Javascript]
<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 ');
});

<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 ');
});
Effect