HTML画饼状图
var totalData=[{name:"考研",num:35},{name:"工作",num:86}];
var schollData=[{name:"西南科技大学",num:15},{name:"电子科技大学",num:8},{name:"四川大学",num:4},{name:"西安电子科技大学",num:8}];
var companyData=[{name:"腾讯",num:6},{name:"百度",num:13},{name:"阿里",num:28},{name:"搜狐",num:12},{name:"新浪",num:9},{name:"去哪儿",num:18}];
var colors=["#EEB422","#43CD80"];
var sum = 0;
var lastsum=0;
window.onload = function(){
var canvas = document.getElementById("cav_pie");
if(canvas==null)return;
canvas.height = 300;
canvas.width = 300;
ctx = canvas.getContext("2d");
sumData();
drawChart();
}
//求数据总和
function sumData(){
for(var i=0;i<totalData.length;i++){
sum+=totalData[i].num;
};
}
//下一个起始
function lastSum(i){
lastsum=0;//重置为0
for (var j = 0; j < i; j++) {
lastsum+=totalData[j].num;
};
}
//画饼图
//半径
var radius=150;
function drawChart(){
for (var i = 0; i < totalData.length;i++) {
lastSum(i);//上一个结束弧度就是下一个起始弧度
var startAngle= (Math.PI*2)*(lastsum/sum);//起始弧度
lastSum(i+1);
var endAngle=(Math.PI*2)*(lastsum/sum);//结束弧度
ctx.save();
ctx.fillStyle=this.colors[i];
ctx.beginPath();
ctx.moveTo(150,150);
ctx.arc(150,150,radius,startAngle,endAngle,false);
ctx.closePath();
ctx.fill();
ctx.restore();
drawText(startAngle,endAngle,totalData[i].name,(100 * totalData[i].num)/sum);
};
}
function drawText(s,e,jn,jsm){
//文字的x，y坐标计算
var x = Math.cos((s+e)/2)*(radius / 2)+150;
var y = Math.sin((s+e)/2)*(radius / 2)+150;
ctx.fill;
ctx.fillText(jn,x,y);
ctx.fill;
//百分比精确到小数后两位
ctx.fillText(jsm.toFixed(2)+"%",x,y+20);
// //绘制由每个饼文字
//ctx.stroke();
}
// //绘制文本和线段
// function drawText(s,e,jn,jsm){
// //文字的x，y坐标计算
// var x = Math.cos((s+e)/2)*(radius+60)+200;
// var y = Math.sin((s+e)/2)*(radius+60)+200;
// ctx.fill;
// ctx.fillText(jn,x,y);
// ctx.fill;
// //百分比精确到小数后两位
// ctx.fillText((parseInt(jsm*20000)/200)+"%",x,y+20);
// //绘制由每个饼指向文字的线段
// ctx.beginPath();
// //各端点坐标由每块的起始弧度和结束弧度求平均后计算得出
// ctx.moveTo(Math.cos((s+e)/2)*radius+200,Math.sin((s+e)/2)*radius+200);
// ctx.lineTo( Math.cos((s+e)/2)*(radius+40)+200, Math.sin((s+e)/2)*(radius+40)+200);
// ctx.closePath();
// ctx.fill;
// ctx.stroke();
// // }
// var draw_pie = document.getElementById('draw_pie');
// var draw_pietWidth = draw_pie.innerWidth;
// var draw_pieHeight = draw_pie.innerHeight;
// canvas.style.top = 0;
// canvas.style.left = (viewportWidth - cav_pieas.width) / 2 + "px";<!DOCTYPE HTML>
<html>
<head>
<title>简单化饼图</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas width="800" height="800">
对不起，您的浏览器版本过低，不支持HTML5.
</canvas>
</body>
<script type="text/javascript">
var jsondata=[{name:"技术部",num:95},{name:"研发部",num:3},{name:"市场部",num:50},{name:"攻关部",num:20},{name:"信息产业部",num:35},{name:"宣传部",num:50}];
var colors=["#cb4539","#fec655","#feff63","#2ba54e","#2b81b0","#053249","#053649"];
var sum = 0;
var lastsum=0;
window.onload = function(){
var canvas = document.getElementById("cav");
if(cav==null)return;
ctx = canvas.getContext("2d");
sumData();
drawChart();
}
//求数据总和
function sumData(){
for(var i=0;i<jsondata.length;i++){
sum+=jsondata[i].num;
};
}
//下一个起始
function lastSum(i){
lastsum=0;//重置为0
for (var j = 0; j < i; j++) {
lastsum+=jsondata[j].num;
};
}
//画饼图
//半径
var radius=200;
function drawChart(){
for (var i = 0; i < jsondata.length;i++) {
lastSum(i);//上一个结束弧度就是下一个起始弧度
var startAngle= (Math.PI*2)*(lastsum/sum);//起始弧度
lastSum(i+1);
var endAngle=(Math.PI*2)*(lastsum/sum);//结束弧度
ctx.save();
ctx.fillStyle=this.colors[i];
ctx.beginPath();
ctx.moveTo(400,400);
ctx.arc(400,400,radius,startAngle,endAngle,false);
ctx.closePath();
ctx.fill();
// ctx.restore();
// drawText(startAngle,endAngle,jsondata[i].name,jsondata[i].num/sum);
};
}
//绘制文本和线段
function drawText(s,e,jn,jsm){
//文字的x，y坐标计算
var x = Math.cos((s+e)/2)*(radius+60)+400;
var y = Math.sin((s+e)/2)*(radius+60)+400;
ctx.fill;
ctx.fillText(jn,x,y);
ctx.fill;
//百分比精确到小数后两位
ctx.fillText((parseInt(jsm*10000)/100)+"%",x,y+20);
//绘制由每个饼指向文字的线段
ctx.beginPath();
//各端点坐标由每块的起始弧度和结束弧度求平均后计算得出
ctx.moveTo(Math.cos((s+e)/2)*radius+400,Math.sin((s+e)/2)*radius+400);
ctx.lineTo( Math.cos((s+e)/2)*(radius+40)+400, Math.sin((s+e)/2)*(radius+40)+400);
ctx.closePath();
ctx.fill;
ctx.stroke();
}
</script>
</html>另：http://www.html5tricks.com/demo/html5-pie-pyramid-chart/index.html
- 上一篇 »入门前端之HTML
- 下一篇 »HTML标签解释大全
