Question

所以我使用Cris Beto的Angular SVG Round Progress Bar来创建一个圆形进度条。无论如何，我想在文本中心添加文本，例如demo。我尝试在div之间添加文本，并进入演示页面上的源代码以试图找出它并且我无法弄明白。

我基本上完全遵循了他的指示，以获得带动画的工作条形图。有任何想法吗？

以防万一，这是我的HTML：

        <div id="circleGraph" class="container-fluid">
        <div
            round-progress
            max="200"
            current="100"
            color="#45ccce"
            bgcolor="#eaeaea"
            radius="100"
            stroke="30"
            semi="false"
            rounded="true"
            clockwise="true"
            responsive="false"
            duration="800"
            animation="easeInOutQuart">
        </div>
    </div>

Answer 1

这可能是一天晚了，一美元短，但在我进一步挖掘之前，它也让我感到难过。他们是这样做的......这是我的实现：

<style>
.progress-percentage-wrapper {
    position: relative;
    margin: 20px auto;
    font-size: 50px;
    width: 200px;
    height: 200px;
}
.progress-percentage {
    position: absolute;
    color: #bbb;
    width: 100%;
    text-align: center !important;
    top: 35%;
}
</style>

<div class="progress-percentage-wrapper">
        <div class="progress-percentage ng-cloak">{{vm.percentageOfGoal | percentage:0}}</div>
            <round-progress max="1"
                        current="vm.percentageOfGoal"
                        color="#45ccce"
                        bgcolor="#eaeaea"
                        radius="100"
                        stroke="20"
                        semi="false"
                        rounded="false"
                        clockwise="true"
                        responsive="false"
                        duration="1000"
                        animation="easeInOutQuart"
                        animation-delay="500"></round-progress>
        </div>
    </div>

Answer 2

这就是我在项目中实现它的方式：

<div class="positionRelative">

    <round-progress
        max="100"
        current="[[myValue.percentage]]"
        color="#4AB7EC"
        bgcolor="#56606B"
        radius="35"
        stroke="5"
        semi="false"
        rounded="false"
        clockwise="true"
        responsive="false"
        duration="800"
        animation="easeInOutQuart"
        animation-delay="0"></round-progress>

        <div class="percentageValue">
            20 % // text that comes in cetner
        </div>

</div>

CSS：

.positionRelative{
    position: relative;

}

.percentageValue {
    left: 10px;
    top: 40%;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}

向Angular SVG Round Progress Bar添加文本

2 个答案: