圆饼图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a1{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="a1" width="500" height="500"></canvas>
<script type="text/javascript">
var a1=document.getElementById('a1');
var canvas=a1.getContext('2d');
var data = [{
"value": .2,
"color": "red",
"title": "数学"
},{
"value": .4,
"color": "blue",
"title": "英语"
},{
"value": .3,
"color": "green",
"title": "语文"
},{
"value": .1,
"color": "pink",
"title": "物理"
}];
var x0=200;
var y0=200;
var r0=100;
var angle=-90;
for(var i=0;i<data.length;i++){
canvas.beginPath();
canvas.moveTo(x0,y0);
var angle1=data[i].value*360;
var start=angle*Math.PI/180;
var end=(angle+angle1)*Math.PI/180;
canvas.arc(x0,y0,r0,start,end,false);
canvas.fillStyle=data[i].color;
canvas.fill();
var text=data[i].title;
var textAngle=angle+1/2*angle1;
var x,y;
x=x0+Math.cos(textAngle*Math.PI/180)*(r0+20);
y=y0+Math.sin(textAngle*Math.PI/180)*(r0+20);
if(textAngle>90 && textAngle<270) {
canvas.textAlign='end';
}
canvas.fillText(text,x,y);
angle+=angle1;
}
</script>
</body>
</html>
柱状图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a1{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="a1" width="600" height="600"></canvas>
<script type="text/javascript">
var a1=document.getElementById('a1');
var canvas=a1.getContext('2d');
var x=100;y=400;
canvas.fillText(0,x,y+20);
canvas.beginPath();
canvas.moveTo(x,y);
canvas.lineTo(400,400);
canvas.lineTo(400-20,400-20);
canvas.moveTo(400,400);
canvas.lineTo(400-20,400+20);
canvas.strokeStyle='blue';
canvas.stroke();
canvas.fillText('x',400,420);
canvas.textAlign='left';
canvas.beginPath();
canvas.moveTo(x,y);
canvas.lineTo(100,100);
canvas.lineTo(100-20,100+20);
canvas.moveTo(100,100);
canvas.lineTo(100+20,100+20);
canvas.strokeStyle='red';
canvas.stroke();
canvas.fillText('y',100,80);
canvas.textAlign='right';
canvas.beginPath();
canvas.moveTo(x+50,y);
canvas.lineTo(x+50,200);
canvas.lineTo(x+80,200);
canvas.lineTo(x+80,y);
canvas.fillStyle='red';
canvas.fill();
canvas.fillText('数学',x+75,180);
canvas.textAlign='center';
canvas.beginPath();
canvas.moveTo(x+100,y);
canvas.lineTo(x+100,300);
canvas.lineTo(x+130,300);
canvas.lineTo(x+130,y);
canvas.fillStyle='orange';
canvas.fill();
canvas.fillText('语文',x+100+15,290);
canvas.textAlign='center';
canvas.beginPath();
canvas.moveTo(x+150,y);
canvas.lineTo(x+150,200);
canvas.lineTo(x+180,200);
canvas.lineTo(x+180,y);
canvas.fillStyle='green';
canvas.fill();
canvas.fillText('化学',x+150+15,180);
canvas.textAlign='center';
</script>
</body>
</html>
折线图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a1{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="a1" width="600" height="600"></canvas>
<script type="text/javascript">
var a1=document.getElementById('a1');
var canvas=a1.getContext('2d');
var x=100;y=400;
canvas.fillText(0,x,y+20);
canvas.beginPath();
canvas.moveTo(x,y);
canvas.lineTo(400,400);
canvas.lineTo(400-20,400-20);
canvas.moveTo(400,400);
canvas.lineTo(400-20,400+20);
canvas.strokeStyle='blue';
canvas.stroke();
canvas.fillText('x',400,420);
canvas.textAlign='left';
canvas.beginPath();
canvas.moveTo(x,y);
canvas.lineTo(100,100);
canvas.lineTo(100-20,100+20);
canvas.moveTo(100,100);
canvas.lineTo(100+20,100+20);
canvas.strokeStyle='red';
canvas.stroke();
canvas.fillText('y',100,80);
canvas.textAlign='right';
canvas.beginPath();
canvas.moveTo(x+20,y-20);
canvas.lineTo(x+60,y-40);
canvas.lineTo(x+80,y-10);
canvas.lineTo(x+100,y-60);
canvas.lineTo(x+120,y-80);
canvas.lineTo(x+150,y-100);
canvas.lineTo(x+180,y-120);
canvas.strokeStyle='#000';
canvas.stroke();
</script>
</body>
</html>