canvas画饼状图

最新推荐文章于 2021-08-27 10:24:51 发布

潋华清辉墨色成画

最新推荐文章于 2021-08-27 10:24:51 发布

阅读量681

点赞数

分类专栏：饼状图文章标签： canvas

本文链接：https://blog.csdn.net/qq_34226413/article/details/70209045

版权

饼状图专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
canvas画饼状图

canvas画饼状图在此写了一个简单的环形饼状图，如大家有更好的方法，多多交流html代码pieChart.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.8.0.min.js"></scr
复制链接

扫一扫