Raphael.js画带间隙的实心饼图

逻辑喵师傅逻辑不通

于 2019-06-28 15:42:38 发布

阅读量257

点赞数

分类专栏：前端文章标签：饼图 Raphael

本文链接：https://blog.csdn.net/lin252552/article/details/94008875

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<script type="text/javascript" src="../js/dist/raphael-min.js"></script>

//调用，先定义画布，pirs为id。pieChart中传入半径，起始点，需要展示的数据等
var values = [parseInt('25', 10), parseInt('25', 10), parseInt('25', 10), parseInt('25', 10)],
	        labels = ['清醒时长','深睡眠时长','浅睡眠时长','初睡眠时长'],
	        valuesP = ["25%","25%","25%","25%"],
	        color = ['#DD7C8A','#EABF85','#5FBBF0','#4AD7D1'];



Raphael("pirs", 260, 260).pieChart(130, 130, 118, values, labels, "#fff", color, valuesP);


//传入的参数可以根据需要自定义

Raphael.fn.pieChart = function (cx, cy, r, values, labels, stroke, valuesC, valuesP) {
    var paper = this,
        rad = Math.PI / 180,
        chart = this.set();
    function sector(cx, cy, r, startAngle, endAngle, params) {
        var x1 = cx + r * Math.cos(-startAngle * rad),
            x2 = cx + r * Math.cos(-endAngle * rad),
            y1 = cy + r * Math.sin(-startAngle * rad),
            y2 = cy + r * Math.sin(-endAngle * rad);
        return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
    }
    var angle = 0,
        total = 0,
        start = 0,
        process = function (j) {
            var value = values[j],
                angleplus = 360 * value / total,
                popangle = angle + (angleplus / 2),
                color = Raphael.hsb(start, .75, 1),
                ms = 500,
                delta = 30,
                bcolor = Raphael.hsb(start, 1, 1),
                colorC = valuesC[j],
                valuess = valuesP[j],
                p = sector(cx, cy, r, angle, angle + angleplus, {fill: colorC, stroke: stroke, "stroke-width": 7}),//stroke-width区块间隙大小
                txt = paper.text(cx + (r - 50) * Math.cos(-popangle * rad), cy + (r - 50) * Math.sin(-popangle * rad), valuess).attr({fill: "#fff", stroke: "none", opacity: 1, "font-size": 20});
            p.mouseover(function () {
                p.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "elastic");
                //txt.stop().animate({opacity: 1}, ms, "elastic");
            }).mouseout(function () {
                p.stop().animate({transform: ""}, ms, "elastic");
                //txt.stop().animate({opacity: 1}, ms);
            });
            angle += angleplus;
            chart.push(p);
            chart.push(txt);
            start += .1;
        };
    for (var i = 0, ii = values.length; i < ii; i++) {
        total += values[i];
    }
    for (i = 0; i < ii; i++) {
        process(i);
    }
    return chart;
};

效果(鼠标进入区块会有动效)：