Canvas根据数据绘制饼形统计图

<canvas width="600" height="400" id="cas" style='border: 1px solid black;'></canvas>
<script>
/* 公共方法 */
// 弧度与角度的互相切换
function toAngle( radian ) { return radian * 180 / Math.PI }
function toRadian( angle ) { return angle * Math.PI / 180 }

var cas = document.getElementById( 'cas' );
var ctx = cas.getContext( '2d' );   // 获取绘图对象

// 根据数据绘制饼形图,准备一组数据
var data = [ 123, 234, 78, 356, 449 ];
// 准备一组颜色数据
var colors = "red,hotpink,indianred,indigo,blue,lavender,lavenderblush,lawngreen,lemonchiffon".split( ',' );
// 求和以计算占比
var sum = 0;
data.forEach( function( v ) { sum += v; } );
// 根据总和，计算每一个百分比和角度 { value: 123, angle: 角度, text:文字描述 }
var data2 = data.map( function( v ) {
return {value : v, angle : v * 360 / sum, text : v + ",占比:" + (v / sum * 100).toFixed( 2 ) + '%'}
} );
console.log( data2 );

/* 准备绘制 */
var angle = -90, // 绘制起始角度
x = cas.width / 2, // 圆心 x 坐标
y = cas.height / 2, // 圆心 y 坐标
r = 100; // 半径
var x1, y1; // 记录描述文字的坐标
var distance = 30; // 指示线超出圆饼的距离
var txtLine; // 文本下划线
var paddingX = 20 / 3, paddingY = 20 / 3; // 设置文本的移动

/* 遍历数据进行绘制 */
data2.forEach( function( v, i ) {
// 绘制扇形
ctx.beginPath(); // 开启路径  因为每次都要换颜色
ctx.fillStyle = colors[ i ];    // 设置 fill 颜色
ctx.moveTo( x, y ); // 画笔移动到 ( x, y )
ctx.arc( x, y , r, toRadian( angle ), toRadian( angle + v.angle ) ); // 绘制圆弧
ctx.fill(); // fill 路径补全，填充成扇形

/*--- 绘制文本 ----*/
// 绘制直线
ctx.beginPath(); // 开启路径，因为要切换绘制方式
ctx.strokeStyle = colors[ i ]; // 设置 stroke 颜色
ctx.moveTo( x, y ); // 画笔移动到 ( x, y )
x1 = x + (r + distance) * Math.cos( toRadian(angle + v.angle / 2) ); //文字 x 坐标
y1 = y + (r + distance) * Math.sin( toRadian(angle + v.angle / 2) ); //文字 y 坐标
ctx.lineTo( x1, y1 ); // 连线
// 绘制横线
txtLine = ctx.measureText( v.text ).width + 2 * Math.abs( paddingX );
// 根据 是往左还是往右，设置 texLine 的 正负
if ( angle + v.angle / 2 < 270 && angle + v.angle / 2 > 90 ) {
txtLine = -ctx.measureText( v.text ).width - 2 * Math.abs(paddingX);
}
ctx.lineTo( x1 + txtLine, y1 );
ctx.stroke(); // 绘制

// 写文字
if ( angle + v.angle / 2 < 270 && angle + v.angle / 2 > 90 ) {
ctx.textAlign = 'right';
paddingX = - 20 / 3;
}
ctx.fillText( v.text , x1 + paddingX, y1 - paddingY );

angle += v.angle;   // 角度加上去
});

</script>