<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>饼图</title>
</head>
<body>
<div id="container"></div>
</body>
<script src="../day35/bar.js"></script>
<script>
var obj = {
id: "container",
width: 500,
height: 300,
data: [
{
name: "不及格",
num: 3,
color: "#ceb241"
},
{
name: "及格",
num: 13,
color: "#55a1a1"
},
{
name: "良好",
num: 30,
color: "#882244"
},
{
name: "优秀",
num: 3,
color: "#448822"
},
{
name: "满分",
num: 1,
color: "#8a8a8a"
}
]
};
drawPie(obj);
</script>
</html>
外部封装的js：
function drawPie(obj) {
var id = obj.id;
var width = obj.width || 500;
var height = obj.height || 300;
var data = obj.data;
var length = data.length;
var ox = width / 2;//圆心x
var oy = height / 2;//圆心y
var or = width > height ? height / 3 : width / 3;//半径
var sum = 0;
for (var i = 0; i < length; i++) {
sum += data[i].num;
}
console.log(sum);
var container = document.getElementById(id);
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.style.border = "1px solid red";
container.appendChild(canvas);
var cvs = canvas.getContext("2d");
var start = 0;
var end = 0;
var rates=[];
for (var j = 0; j < length; j++) {
rates.push(data[j].num/sum);
end = start + Math.PI * 2 * (data[j].num / sum);
cvs.beginPath();
cvs.fillStyle = data[j].color;
cvs.moveTo(ox, oy);
cvs.arc(ox, oy, or, start, end);
cvs.closePath();
cvs.fill();
start = end;
}
var rectStartOx = 20;
var rectStartOy = 20;
var text="";
for (var k = 0; k < length; k++) {
cvs.beginPath();
cvs.fillStyle = data[k].color;
cvs.rect(rectStartOx, rectStartOy, 20, 10);
cvs.closePath();
cvs.fill();
cvs.font = "12px 宋体";
text=data[k].name+":"+Math.round(rates[k]*10000/100)+"%";
cvs.fillText(text, 50, rectStartOy + 9);
rectStartOy += 20;
}
}
6716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
