canvas画饼状图

来源：互联网发布：java中compareto 编辑：程序博客网时间：2024/06/03 01:37

canvas画饼状图

在此写了一个简单的环形饼状图，如大家有更好的方法，多多交流

html代码

pieChart.html

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="js/jquery-1.8.0.min.js"></script>    </head>    <body>        <div>            <canvas id="doughnut" width="100px" height="100px"></canvas>        </div>        <script type="text/javascript" src="js/canvas.js" ></script>    </body></html>

js代码

canvas.js

$(document).ready(function(){    var canvas=document.getElementById("doughnut");    var param={        "canvas" : canvas,        "colors": ['#ec644c', '#d166b1','#53c5ac',"#72acea","cccccc"],         "ratio" : [0.39,0.26,0.13,0.22],         "intermediateColor" : "rgba(225,225,225,0.2)",        "centerColor" :'#ffffff',        "borderWidth" : 35    }     doughnutChart(param);});/**     * canvas 环形饼状图     * @param canvas 获取canvas元素，必传     * @param colors 饼状图各部分占比的背景色     * @param ratio  各部分所占比例 例如 12.9%  传0.129     * @param centerColor 环形饼状图内心圆填充色     * @param      intermediateColor 中间圆填充色(可不传)     * @param borderWidth 环形宽度（外圆半径减去内圆半径）     */    function doughnutChart(param){        var target = param.canvas,//获取 canvas元素            borderWidth=param.borderWidth,//环形宽度（外圆半径减去内圆半径）            centerColor=param.centerColor,//环形饼状图内心圆填充色            intermediateColor=param.intermediateColor,//中间圆填充色(可不传)            ratio=param.ratio,//展示各百分比，例如 12.9%  传0.129            colors = param.colors,//各比例背景色            ctx = target.getContext('2d'),//返回一个用于在画布上绘图的环境            center = Math.floor(target.height/2), //外圆半径               radius = center,            startAngle = Math.PI * 1.5,//开始的弧度            endAngle = Math.PI * 1.5;//结束时的弧度        $.each(ratio, function(i,v) {             //弧度 = 角度 * Math.PI / 180             //v*360*Math.PI/180 =  v * Math.PI * 2            endAngle = endAngle - v * Math.PI * 2;            ctx.fillStyle = colors[i];//填充色            ctx.beginPath();// 一个画布中开始子路径的一个新的集合            ctx.moveTo(center, center); //把窗口的左上角移动到一个指定的坐标            ctx.arc(center, center, radius, startAngle, endAngle, true);//画圆            ctx.closePath();//创建从当前点到开始点的路径            ctx.fill();//方法填充当前的图像（路径）。默认颜色是黑色            startAngle = endAngle;        });        if(intermediateColor != undefined&&intermediateColor != ""){             ctx.fillStyle =intermediateColor;             ctx.beginPath();             ctx.arc(center, center, radius-borderWidth+4, 0, Math.PI * 2, true);             ctx.fill();        }        ctx.fillStyle =centerColor;        ctx.beginPath();        ctx.arc(center, center, radius-borderWidth, 0, Math.PI * 2, true);        ctx.fill();    }

效果图
这里写图片描述

0 0