canvas实现数据比例图形

如何能够直接清晰的表达一件事呢？如果说用数据、比例大家应该都不会反对。而canvas能很好的实现这一效果。

canvas实现饼状图

使用canvas实现饼状图之前我们首先要做好准备工作，设置好画布、画笔
document.addEventListener('DOMContentLoaded',function(){ var oC = document.querySelector('#c1'); var gd = oC.getContext('2d'); },false);
<canvas id="c1" width="800" height="600"></canvas>

需要根据已知数据获取图形比例,个数据在数据总和中所占比例与图形中所占比例相等。
var arr=[120,50,90,180,40]; var sum = 0; for(var i = 0;i<arr.length;i++){ sum+=arr[i]; } var aDeg = []; for(var i = 0;i<arr.length;i++) { aDeg[i] = arr[i]/sum*360; }

饼状图主要是canvas的arc画弧函数

 gd.arc(圆心坐标x,圆心坐标y,半径,起始角度（弧度），结束角度，false)

先定义一个drawPie()函数画出一块数据，arc画弧函数是弧度单位，需要与角度进行转换，为了效果绚丽，可以设置随机颜色
function d2a(n){ return n*Math.PI/180; }
function rnd(m,n){ return parseInt(m+Math.random()*(n-m)); }

设置定值，圆心、半径

var cx = 200;
var cy = 200;
var r = 100;

function drawPie(start,end) { gd.beginPath();//抬笔 gd.moveTo(cx,cy);//初始点，与圆心重合 gd.arc(cx,cy,r,d2a(start),d2a(end),false);//画弧度 gd.closePath();//闭合 gd.fillStyle = 'rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';//填充随机颜色 gd.fill(); }

循环创建数据弧度：
起始位置是累加的

var d = 0;
for(var i = 0;i<aDeg.length;i++){ drawPie(d,d+aDeg[i]); d+=aDeg[i]; }

canvas柱状图

实现柱状图主要是应用canvas绘画矩形

gd.strokeRect(x,y,w,h); 

柱状图与饼图的区别主要在于比例分配、坐标分布

注：以下实例为布满画布，不留旁白的情况，如需旁白可简易的利用padding或计算旁白大小之后再进行画布布局

因布满画布，可以利用最大的数据来进行比例分配
var arr=[300,200,50,800,150,900]; var iMax = Math.max.apply(null,arr);//求最大值 var aHeight = []; for(var i = 0;i<arr.length;i++){ aHeight[i] = arr[i]/iMax*oC.height;//每项数据比例高度 }
接下来设置坐标，首先X轴方向，设柱体宽度w与柱体间距比例为1:2；
var w = oC.width/(aHeight.length*3-2); var iSpace = w*2;
参数x,y点是矩形的左上点坐标点，所以Y轴为画布高度与柱体高度之差；
循环绘画随机颜色柱体：
for(var i = 0;i<aHeight.length;i++){ gd.fillStyle = 'rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')'; gd.fillRect((w+iSpace)*i,oC.height - aHeight[i],w,aHeight[i]); }