(function( w ) {

// 角度轉換為弧度

function angleToRadian( angle ) {

return Math.PI / 180 * angle;

}

/*

* constructor { PipeChart } 餅圖構造函數

* param { ctx: Context } 繪圖上下文

* param { data: Array } 繪制餅圖所需的數據

* param { x: number } 圓心x坐標

* param { y: number } 圓心y坐標

* param { r: number } 餅圖半徑

* */

function PipeChart( ctx, data, x, y, r ) {

this.ctx = ctx;

this.data = data;

this.x = x;

this.y = y;

this.r = r;

// 文字襯托線到圓的距離

this.lineSpace = 20;

// 扇形和文字的楊色

this.colors =

'blue,hotpink,green,deeppink,ivory,skyblue,lavender,lavenderblush'

.split(',');

// 把數據轉換為對應的角度

this.processData();

}

// 置換原型

PipeChart.prototype = {

constructor: PipeChart,

// 繪制餅圖

draw: function() {

this.drawPipe();

this.drawText();

},

// 根據數據轉換成對應的角度

processData: function() {

/*

* 實現思路：

* 1、求單位數據所占用的角度 ==> 360 / 數據總和

* 2、使用單位數據所占用角度 * 每一份數據值得到每一份

數據所占用的角度

* 3、把計算好的角度使用一個數據存儲起來，供其他方法使

用

* */

var self = this;

// 求數據總和

var num = 0;

this.data.forEach( function( obj ) {

num += obj.val;

});

// 求單位數據所占用的角度

var unitAngle = 360 / num;

// 用來存儲數據所占用餅圖的角度

this.processArr = [];

this.data.forEach( function( obj ) {

// 這里的this不是餅圖實例，所以使用self

self.processArr.push( unitAngle * obj.val );

});

},

// 繪制餅中的扇

drawPipe: function() {

// 扇形默認起點和結束點

var startAngle = 0;

var endAngle = 0;

/*

* 實現思路：

* 1、遍歷所有計算好的角度

* 2、beginPath、moveTo到餅圖圓心

* 3、畫對應扇形的弧

* 3.1、弧的起點位置 = 上一個弧的結束點

* 3.2、弧的結束點位置 = 上一個弧的結束點 + 自己的角度

* 4、closePath

* 5、修改填充色

* 6、fill

* */

// 遍歷所有計算好的角度，繪制成不同顏色的扇形

for( var i = 0, len = this.processArr.length; i < len;

i++ ) {

// 當前扇形弧的起點位置 = 上一個扇形弧的結束點

// 當前扇形弧的結束點位置 = 上一個扇形弧的結束點 +

自己扇形所占用的角度

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();

}

},

// 繪制文字

drawText: function() {

// 扇形默認起點和結束點

var startAngle = 0;

var endAngle = 0;

// 扇形平分線的角度

var lineAngle = 0;

var lineX = 0;

var lineY = 0;

// 遍歷所有計算好的角度，繪制成不同顏色的扇形

for( var i = 0, len = this.processArr.length; i < len;

i++ ) {

// 當前扇形弧的起點位置 = 上一個扇形弧的結束點

// 當前扇形弧的結束點位置 = 上一個扇形弧的結束點 +

自己扇形所占用的角度

startAngle = endAngle;

lineAngle = startAngle + this.processArr[i] / 2;

endAngle = endAngle + this.processArr[i];

/*

* 求平分線的x&y坐標

* x: 圓心x + r * Math.cos( angleToRadian(45) )

* y: 圓心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) );

// 畫扇形平分線

this.ctx.beginPath();

this.ctx.moveTo( this.x, this.y );

this.ctx.lineTo( lineX, lineY );

this.ctx.strokeStyle = this.colors[i];

this.ctx.stroke();

// 添加文字描述

if( lineAngle >= 90 & 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();

}

}

};

// 給原型添加一個餅圖插件方法

jQuery.fn.extend({

// 在第一個元素中，按照指定的數據繪制餅圖

pipeChart: function( data ) {

/*

* 實現思路：

* 1、動態創建canvas元素，并且獲取繪圖環境

* 2、獲取第一個元素的大小，按照這個大小動態設置畫布的

大小

* 3、創建餅圖對象，調用draw方法繪制

* 4、把繪制好的畫布添加到第一個元素中

* */

// 創建canvas，獲取ctx

var $cvs = $('');

var ctx = $cvs.get(0).getContext( '2d' );

var $first = this.first();

var width = parseInt( $first.css( 'width' ) );

var height = parseInt( $first.css( 'height' ) );

// 根據元素大小動態設置畫布大小

$cvs.attr({

width: width,

height: height

});

// 計算餅圖半徑，圓心

var r = width > height? height / 2: width / 2;

var x = width / 2;

var y = height / 2;

// 根據數據繪制餅圖

var pipeChart = new PipeChart( ctx, data, x, y, r - 50

);

pipeChart.draw();

// 把繪制好的畫布添加到第一個元素中

$first.append( $cvs );

}

})

}( window ));

總結

以上是生活随笔為你收集整理的java圆饼图插件_饼图----插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。