javascript - JS 边框未显示 - 自定义图表 Jquery 函数

Question

我添加了一个圆环图。一切都很完美。我需要在圆圈内外添加边框。

我的代码:

<script>                                    
    $('.demo').diagram({
    size: "200", // graph size
    borderWidth: "40", // border width                                  
    bgFill: "#f5f5f5", // background color
    frFill: "#ed9705", // foreground color
    textSize: 40, // text color
    textColor: '#5a5a5a' // text color                                  
    });                                 
</script>

输出:

我正在尝试添加内部和外部边框，但运气不好

HTML

<p>
    <div class="demo roundGraph" data-percent="68%">
    </div>                          
</p>

整个 JS:

(function($) {

    $.fn.diagram = function(params){

        function rotate(angle) {
            return {
                "-webkit-transform": "rotate("+angle+"deg)",
                "-moz-transform": "rotate("+angle+"deg)",
                "-ms-transform": "rotate("+angle+"deg)",
                "-o-transform": "rotate("+angle+"deg)",
                "transform": "rotate("+angle+"deg)"
            };
        }

        var defaults = {
            size: "100",
            borderWidth: "10",
            bgFill: '#bbb',
            frFill: '#0bf',
            textSize: 50+'px',
            font: "serif",
            textColor: '#000'
        };

        var options = $.extend({}, defaults, params);

        var $this = $(this);
        var dataAttr = $this.data("percent");
        var data = parseFloat(dataAttr);

        var cssMain = {
            "position": "relative",
            "width": options.size+"px",
            "height": options.size+"px",
            "border": options.borderWidth + "px " + "solid" + options.bgFill,
            "border-radius": "50%",
            "z-index": "1"
        };

        var cssElems = {
            "position": "absolute",
            "top": -options.borderWidth+"px",
            "right": -options.borderWidth+"px",
            "bottom": -options.borderWidth+"px",
            "left": -options.borderWidth+"px",
            "border": options.borderWidth+"px " + "solid",
            "border-radius": "50%"
        };

        $this.css(cssMain);

        var text = $('<span></span>')
            .appendTo($this)
            .css({
                "display": "block",
                "position": "relative",
                "z-index": "2",
                "text-align": "center",             
                "border-radius": "50%",             
                "font-size": options.textSize,
                "font-family": options.font,
                "height": options.size+"px",
                "line-height": options.size+"px",
                "color": options.textColor
            })
            .text(dataAttr);

        var bg = $('<div></div>')
            .appendTo($this)
            .css(cssElems)
            .css({
                "border-color": options.frFill,
                "border-left-color": "transparent",
                "border-bottom-color": "transparent",
                "z-index": "1"
            });

        var fill = $('<div></div>')
            .appendTo($this)
            .css(cssElems)
                .css({
                "border-color": options.bgFill,
                "border-left-color": "transparent",
                "border-bottom-color": "transparent",
                "z-index": "1"
            });

        var angle;
        if (data >= 0 && data <= 50) {
            angle = (225 - 45)/50*data + 45;
        } else {
            angle = (405 - 225)/50*data + 225;
            fill.css({
                "border-color": options.frFill,
                "border-left-color": "transparent",
                "border-bottom-color": "transparent",
                "z-index": "1"
            });
        }

        bg.css(rotate(45));
        fill.css(rotate(angle));

        return this;
    };

})(jQuery);

这就是我现在使用的所有内容。有什么帮助吗？

这是我想要的输出

Answer 1

要正确显示边框，您需要指定 border-type 和 border-color。

试试这个:

 $('.demo').diagram({
   size: "200", // graph size
   border: "40px solid #000", // border                                  
   bgFill: "#f5f5f5", // background color
   frFill: "#ed9705", // foreground color
   textSize: 40, // text color
   textColor: '#5a5a5a' // text color                                  
 });