Question

我想在div中添加多个圆圈，它应该看起来像我排的所有三个圆圈。如何使用circles.js实现。

HTML：

以下是用于生成

的js代码

var myCircle = Circles.create(
            {
                id:         'circles-1',
                radius:     60,
                value:      7,
                maxValue:   100,
                width:      10,
                text:       function(value){return value + '%';},
                colors:     ['#FFF', '#FFA500'],
                duration:   400,
                wrpClass:   'circles-wrp',
                textClass:  'circles-text'
            }

Answer 1

需要三个单独的Div 来分别渲染每个圆圈。

您可以在下方显示连续三个圈。

enter image description here

<html>
<head>
  <script type="text/javascript" src="circles.min.js"></script>
  <style>
    #canvas .circle {
      display: inline-block;
      margin: 1em;
    } 
  </style>

</head>
<body>

    <div id="canvas">
      <div class="circle" id="circles-1"></div>
      <div class="circle" id="circles-2"></div>
      <div class="circle" id="circles-3"></div>
     </div>


 <script type="text/javascript">
            var myCircle = Circles.create({
                id:         'circles-1',
                radius:     60,
                value:      43,
                maxValue:   100,
                width:      10,
                text:       "Apple",
                colors:     ['#D3B6C6', '#4B253A'],
                duration:   400,
                wrpClass:   'circles-wrp',
                textClass:  'circles-text'
            }); 

            var myCircle2 = Circles.create({
                id:         'circles-2',
                radius:     40,
                value:      43,
                maxValue:   100,
                width:      10,
                text:       "Banana",
                colors:     ['#FCE6A4', '#EFB917'],
                duration:   400,
                wrpClass:   'circles-wrp',
                textClass:  'circles-text'
            }); 

            var myCircle3 = Circles.create({
                id:         'circles-3',
                radius:     40,
                value:      43,
                maxValue:   100,
                width:      10,
                text:       "Mango",
                colors:     ['#BEE3F7', '#F8F9B6'],
                duration:   400,
                wrpClass:   'circles-wrp',
                textClass:  'circles-text'
            }); 

    </script>
</body>
</html>

Answer 2

如果我理解正确的话：

HTML：

<div class="cicles">
    <div class="circle" id="circle-1"></div>
    <div class="circle" id="circle-2"></div>
</div>

JS：

var myCircle1 = Circles.create(
        {
            id:         'circle-1',
            radius:     60,
            value:      7,
            maxValue:   100,
            width:      10,
            text:       function(value){return value + '%';},
            colors:     ['#FFF', '#FFA500'],
            duration:   400,
            wrpClass:   'circles-wrp',
            textClass:  'circles-text'
        }

var myCircle2 = Circles.create(
        {
            id:         'circle-2',
            radius:     60,
            value:      7,
            maxValue:   100,
            width:      10,
            text:       function(value){return value + '%';},
            colors:     ['#FFF', '#FFA500'],
            duration:   400,
            wrpClass:   'circles-wrp',
            textClass:  'circles-text'
        }

使用circles.js在div中添加多个圆圈

2 个答案: