html5制作饼图

Html

Css

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 = 10,
         height = 10; //图例宽和高  
     var posX = ox * 2 + 20,
         posY = 30; //  
     var textX = posX + width + 5,
         textY = posY + 10;

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 + 30 * i, width, height);
         ctx.moveTo(posX, posY + 30 * i);
         ctx.font = 'bold 15px 微软雅黑'; //斜体 30像素 微软雅黑字体  
         ctx.fillStyle = color_arr[i]; //"#000000";  
         var percent = text_arr[i] + "：" + (100 * data_arr[i]).toFixed(2) + " %";
         ctx.fillText(percent, textX, textY + 30 * i);
     }
 }

function init() {
     var text_arr = ["", "", "", "", "", ""];
     var color_arr = ["#00CC99", "#660000", "#66FFFF", "#CCCCFF", "#FF6600", "#9933FF"];
     var data_arr = [0.25, .0125, 0.125, 0.25, 0.125, 0.25];
     drawCircle("canvas_circle", data_arr, color_arr, text_arr);
 }

window.onload = init;

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

html5制作饼图



代码描述：js html5制作饼图

1

最新

发表评论全部评论

暂时没有评论！

duzz0

2017/8/31 14:24:27

echarts轻松解决
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

yankeyong

相关代码

html5制作饼图

最新