85 lines
3.3 KiB
HTML
85 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title></title>
|
|
<style>
|
|
#pieChartContainer canvas{
|
|
background-color:#ccc;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="pieChartContainer"></div>
|
|
<script src="../dist/nuclear.js"></script>
|
|
<script type="text/javascript">
|
|
var PieChart = Nuclear.createCanvas({
|
|
sector: function (x, y, r, begin, end, color, clock, isStroke, lineWidth) {
|
|
var ctx = this.ctx;
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
if (lineWidth) ctx.lineWidth = lineWidth;
|
|
ctx[isStroke ? "strokeStyle" : "fillStyle"] = color;
|
|
ctx.moveTo(x, y);
|
|
ctx.arc(x, y, r, begin, end, clock)
|
|
ctx.lineTo(x, y);
|
|
ctx[isStroke ? "stroke" : "fill"]();
|
|
ctx.restore();
|
|
},
|
|
render: function () {
|
|
var option = this.option;
|
|
var ctx = this.ctx;
|
|
var totalCount = 0, begin = 0;
|
|
var i = 0, len = option.data.length;
|
|
for (; i < len; i++) {
|
|
totalCount += option.data[i].count;
|
|
}
|
|
//Sector
|
|
for (i = 0; i < len; i++) {
|
|
var item = option.data[i];
|
|
var end = Math.PI * 2 * (item.count / totalCount) + begin;
|
|
this.sector(option.x, option.y, option.r, begin, end, item.color);
|
|
begin = end;
|
|
}
|
|
//Sector Border
|
|
for (i = 0; i < len; i++) {
|
|
var item = option.data[i];
|
|
var end = Math.PI * 2 * (item.count / totalCount) + begin;
|
|
this.sector(option.x, option.y, option.r, begin, end, "white", true, true, 2);
|
|
begin = end;
|
|
}
|
|
//Text
|
|
for (i = 0; i < len; i++) {
|
|
var item = option.data[i];
|
|
var end = Math.PI * 2 * (item.count / totalCount) + begin;
|
|
var angle = begin + (end - begin) / 2;
|
|
var x = option.x + option.r * Math.cos(angle);
|
|
var y = option.y + option.r * Math.sin(angle);
|
|
ctx.save();
|
|
ctx.font = "bold 14px Arial";
|
|
ctx.fillText(item.name, x - ctx.measureText(item.name).width / 2, y);
|
|
ctx.restore();
|
|
begin = end;
|
|
}
|
|
}
|
|
})
|
|
|
|
var pc=new PieChart(300,300, {
|
|
x: 140,
|
|
y: 140,
|
|
r: 120,
|
|
data: [
|
|
{ name: "Javascript", count: 100, color: "#A8322E" },
|
|
{ name: "C#", count: 97, color: "#8FB443" },
|
|
{ name: "C++", count: 109, color: "#2D9EBC" },
|
|
{ name: "Java", count: 12, color: "#D3731F" },
|
|
{ name: "PHP", count: 55, color: "#FA9416" }
|
|
]
|
|
}, "#pieChartContainer");
|
|
//更改数据自动刷新Canvas
|
|
pc.option.data[0].count = 200;
|
|
</script>
|
|
<a href="https://github.com/AlloyTeam/Nuclear" target="_blank" style="position: absolute; right: 0; top: 0;">
|
|
<img src="github.png" alt="" />
|
|
</a>
|
|
</body>
|
|
</html> |