饼状图

by boia

HTML

<body>
    <canvas id="mycanvas" width=500 height=400></canvas>
    <div id="display"></div>
</body>

CSS

canvas {
			    border: 1px solid #4c4c4c;
			    border-radius:10px;
			    box-shadow:5px 5px rgba(0, 100, 100, .6);
			}
			.display {
			    position: absolute;
			    top: 300px;
			    left: 300px;
			    width:200px;
			    height:100px;
			    background:#ffcc66;
			    border-radius:10px;
			    box-shadow:5px 5px rgba(100, 100, 100, .6);
			    text-shadow:1px 1px 1px rgba(0, 0, 0, .3);
			}

JavaScript

$(document).ready(function () {
			    var graph = {};

			    function addEvent(obj, event, fuc) {
			        if (obj.addEventListener) {
			            obj.addEventListener(event, fuc);

			        } else if (obj.attachEvent) {
			            obj.attachEvent("on" + event, function (event) {
			                //使作用域指向obj(事件对象)
			                return fuc.call(obj, event);
			            });
			        }
			    }
			    var Stage = function () {
			        this.canvas = $("#mycanvas");
			        this.width = this.canvas.width();
			        this.height = this.canvas.height();
			        this.canvas = document.getElementById("mycanvas");
			        this.ctx = this.canvas.getContext("2d");
			    };

			    graph["Stage"] = Stage;
			    var Text1 = function (content, x, y, font, color) {
			        content = content || "";
			        x = x || 0;
			        y = y || 0;
			        font = font || "30px serif";
			        color = color || "RGB(0,0,0)";
			        this.stage = new graph.Stage();

			        this.content = content;
			        this.x = x;
			        this.y = y;

			        this.font = font;
			        this.color = color;
			        this.write(this.content);
			    };

			    Text1.prototype.write = function () {
			        //this.content = content;
			        this.stage.ctx.save();
			        this.stage.ctx.font = this.font;
			        this.stage.ctx.StrokeStyle = this.color;
			        this.stage.ctx.fillText(this.content, this.x, this.y);
			        this.stage.ctx.restore();
			    };

			    graph["Text1"] = Text1;

			    var Sector = function (startAngle, endAngle, color, num, rate) {
			        this.startAngle = startAngle;
			        this.endAngle = endAngle;
			        this.color = color;
			        this.num = num;
			        this.rate = rate;
			    };

			    graph["Sector"] = Sector;
			    var Circle = function (data) {
			        data = data || [];

			        this.stage = new graph.Stage;
			        this.ctx = this.stage.ctx;

			       ...