Pie chart----Plug-in

(function (W) {
Angle converted to radians
function Angletoradian (angle) {
return math.pi/180 * angle;
}

/*
* Constructor {Pipechart} pie chart Constructor
* param {Ctx:context} drawing context
* param {Data:array} data needed to draw pie chart
* param {X:number} center X coordinate
* param {y:number} center Y coordinate
* param {R:number} pie chart radius
* */
function Pipechart (CTX, data, x, Y, R) {

This.ctx = CTX;
This.data = data;
this.x = x;
This.y = y;
THIS.R = R;

The distance from the line to the circle
This.linespace = 20;

The color of the fan and the text
This.colors =
' Blue,hotpink,green,deeppink,ivory,skyblue,lavender,lavenderblush '
. Split (', ');

Convert the data to a corresponding angle
This.processdata ();
}

Displacement prototypes
Pipechart.prototype = {

Constructor:pipechart,

Draw a pie chart
Draw:function () {
This.drawpipe ();
This.drawtext ();
},

Convert from data to corresponding angle
Processdata:function () {
/*
* Realization Idea:
* 1, to find the unit data occupied by the angle ==> 360/Data sum
* 2, the use of unit data occupied by the angle * each piece of data worth every
The angle at which the data is occupied
* 3, the calculated angle using a data storage, for other methods to make
Use
* */
var = this;

Finding the sum of data
var num = 0;
This.data.forEach (function (obj) {
num + = Obj.val;
});

Calculate the angle occupied by the unit data
var unitangle = 360/num;

The angle used to store the pie chart occupied by the data
This.processarr = [];

This.data.forEach (function (obj) {
This is not a pie chart instance, so use self
Self.processArr.push (Unitangle * obj.val);
});
},

Draw a fan in a pie
Drawpipe:function () {

Sector default start and end points
var startangle = 0;
var endangle = 0;

/*
* Realization Idea:
* 1, traverse all calculated angles.
* 2, Beginpath, MoveTo to the center of the pie chart
* 3, draw the corresponding fan arc
* 3.1, beginning position of Arc = end point of previous arc
* 3.2, arc end point position = end point of previous arc + own angle
* 4, Closepath
* 5, modify the fill color
* 6, fill
* */

Traverse all calculated angles and draw a fan of different colors
for (var i = 0, len = this.processArr.length; i < Len;
i++) {

Start position of current sector arc = end point of previous sector arc
The end point position of the current sector arc = end point of the previous sector arc +
The angle in which the fan is occupied.
StartAngle = Endangle;
Endangle = Endangle + this.processarr[i];

This.ctx.beginPath ();
This.ctx.moveTo (this.x, THIS.Y);
This.ctx.arc (This.x, This.y, THIS.R,
Angletoradian (StartAngle), Angletoradian (Endangle));
This.ctx.closePath ();
This.ctx.fillStyle = this.colors[I];
This.ctx.fill ();
}
},

Draw text
Drawtext:function () {

Sector default start and end points
var startangle = 0;
var endangle = 0;

The angle of the sectorial split line
var lineangle = 0;
var LineX = 0;
var Liney = 0;

Traverse all calculated angles and draw a fan of different colors
for (var i = 0, len = this.processArr.length; i < Len;
i++) {

Start position of current sector arc = end point of previous sector arc
The end point position of the current sector arc = end point of the previous sector arc +
The angle in which the fan is occupied.
StartAngle = Endangle;
Lineangle = startangle + this.processarr[i]/2;
Endangle = Endangle + this.processarr[i];

/*
* Find the X&y coordinates of the dividing line
* x: Center x + R * Math.Cos (Angletoradian (45))
* Y: Center y + R * Math.sin (Angletoradian (45))
* */
LineX = this.x + (THIS.R + this.linespace) *
Math.Cos (Angletoradian (Lineangle));
Liney = This.y + (THIS.R + this.linespace) *
Math.sin (Angletoradian (Lineangle));

Draw a fan-shaped split line
This.ctx.beginPath ();
This.ctx.moveTo (this.x, THIS.Y);
This.ctx.lineTo (LineX, Liney);
This.ctx.strokeStyle = This.colors[i];
This.ctx.stroke ();

Add a text description
if (lineangle >= & Lineangle <= 270) {
This.ctx.textAlign = ' right ';
This.ctx.moveTo (LineX, Liney);
This.ctx.lineTo (Linex-this.ctx.measuretext (
this.data[i].msg). width, Liney);
}else {
This.ctx.textAlign = ' Left ';
This.ctx.moveTo (LineX, Liney);
This.ctx.lineTo (LineX + this.ctx.measureText (
this.data[i].msg). width, Liney);
}
This.ctx.textBaseline = ' bottom ';
This.ctx.fillStyle = This.colors[i];
This.ctx.fillText (This.data[i].msg, LineX, Liney
-5);
This.ctx.stroke ();
}
}
};

Add a Pie chart plugin method to the prototype
JQuery.fn.extend ({

In the first element, a pie chart is drawn according to the specified data
Pipechart:function (data) {
/*
* Realization Idea:
* 1. Create a canvas element dynamically and get the drawing environment
* 2, to get the size of the first element, dynamically set the canvas according to this size
Size
* 3, create a pie chart object, call draw method drawing
* 4. Add a drawn canvas to the first element
* */

Create a canvas to get CTX
var $cvs = $ (' <canvas></canvas> ');
var ctx = $cvs. Get (0). GetContext (' 2d ');

var $first = This.first ();
var width = parseint ($first. css (' width '));
var height = parseint ($first. css (' height '));

Dynamically set canvas size based on element size
$cvs. attr ({
Width:width,
Height:height
});

Calculate pie radius, center point
var r = width > height? HEIGHT/2: WIDTH/2;
var x = WIDTH/2;
var y = height/2;

Draw a pie chart based on data
var pipechart = new Pipechart (CTX, data, x, Y, r-50
);
Pipechart.draw ();

Add a drawn canvas to the first element
$first. Append ($cvs);
}
})

} (window));

Pie chart----Plug-in