Canvas根据数据定义角度

标题 ##Canvas根据数据定义角度

（绘制饼形图）
根据数据源定义角度, 就是将所有的数据求和, 按照总和为 2 * Math.PI 的结论计算出每一个数据部分的弧度值. 同时颜色可以提前定义好.
从 Konva 库中分离出来的颜色
var colors =
( “aliceblue,antiquewhite,aqua,aquamarine,azure,beige,bisque,black,blanchedalmond,blue,” +
“blueviolet,brown,burlywood,cadetblue,chartreuse,chocolate,coral,cornflowerblue,cornsilk,” +
“crimson,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,darkgreen,darkgrey,darkkhaki,darkmagenta,” +
“darkolivegreen,darkorange,darkorchid,darkred,darksalmon,darkseagreen,darkslateblue,darkslategray,” +
“darkslategrey,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dimgrey,dodgerblue,firebrick,” +
“floralwhite,forestgreen,fuchsia,gainsboro,ghostwhite,gold,goldenrod,gray,green,greenyellow,grey,” +
“honeydew,hotpink,indianred,indigo,ivory,khaki,lavender,lavenderblush,lawngreen,lemonchiffon,” +
“lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lightgray,lightgreen,lightgrey,lightpink,” +
“lightsalmon,lightseagreen,lightskyblue,lightslategray,lightslategrey,lightsteelblue,lightyellow,” +
“lime,limegreen,linen,magenta,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurple,” +
“mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue,” +
“mintcream,mistyrose,moccasin,navajowhite,navy,oldlace,olive,olivedrab,orange,orangered,orchid,” +
“palegoldenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,peru,pink,plum,powderblue,” +
“purple,rebeccapurple,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,seagreen,seashell,sienna,” +
“silver,skyblue,slateblue,slategray,slategrey,snow,springgreen,steelblue,tan,teal,thistle,transparent,” +
“tomato,turquoise,violet,wheat,white,whitesmoke,yellow,yellowgreen” ).split( ‘,’ );
如果得到数据
var data = [ 123, 156, 47, 100, 80 ];
那么计算各个部分的比例时, 可以构造一个存储分量值与弧度的对象数组.
var sum = 0;
for ( var i = 0; i < data.length; i++ ) {
sum += data[ i ];
}
// 得到总数后, 分量比就有了
var odata = data.map(function ( v, i ) {
return { value: v, radius: v * 2 * Math.PI / sum };
});
最后根据数据开始绘图
// 开始绘图
var start = -Math.PI / 2,
x = 200, y = 200,
r = 100;

for ( var i = 0; i < odata.length; i++ ) {
    ctx.beginPath();
    ctx.fillStyle = colors[ i + 10 ];
    ctx.moveTo( x, y );
    ctx.arc( x, y, r, start, start+=odata[ i ][ 'radius' ] );
    ctx.fill();
}