html 饼图统计

 window.onload = function init() {//绘制饼图 ?var data_arr = [0.5, 0.5]; ???????var color_arr = ["#26b899", "#b370cf"]; ???????var text_arr = ["补票", "卡"]; ???????drawCircle("canvas_circle", data_arr, color_arr, text_arr); ???????//绘制饼图 ???????function drawCircle(canvasId, data_arr, color_arr, text_arr) ???????{ ???????????var c = document.getElementById(canvasId); ???????????var ctx = c.getContext("2d"); ???????????var radius = c.height / 2 - 20; //半径 ???????????var ox = radius + 20, oy = radius + 20; //圆心 ???????????var width = 25, height = 15; //图例宽和高 ???????????var posX = ox * 2 + 20, posY = 70; ??// ???????????var textX = posX + width + 10, textY = posY + 15; ???????????var startAngle = 0; //起始弧度 ???????????var endAngle = 0; ??//结束弧度 ???????????for (var i = 0; i < data_arr.length; i++) ???????????{ ???????????????//绘制饼图 ???????????????endAngle = endAngle + data_arr[i] * Math.PI * 2; //结束弧度 ???????????????ctx.fillStyle = color_arr[i]; ???????????????ctx.beginPath(); ???????????????ctx.moveTo(ox, oy); //移动到到圆心 ???????????????ctx.arc(ox, oy, radius, startAngle, endAngle, false); ???????????????ctx.closePath(); ???????????????ctx.fill(); ???????????????startAngle = endAngle; //设置起始弧度 ???????????????//绘制比例图及文字 ???????????????ctx.fillStyle = color_arr[i]; ???????????????ctx.fillRect(posX, posY + 40 * i, width, height); ???????????????ctx.moveTo(posX, posY + 40 * i); ???????????????ctx.font = ‘18px 微软雅黑‘; ???//斜体 30像素 微软雅黑字体 ???????????????ctx.fillStyle = color_arr[i]; //"#000000"; ???????????????var percent = text_arr[i] + "：" + (100.*data_arr[i]).toFixed(2) + "%"; ???????????????ctx.fillText(percent, textX, textY + 40 * i); ???????????} ???????}}

 ?<canvas id="canvas_circle" width="600" height="300"> ???????浏览器不支持canvas ???</canvas>