Question

我正在制作一个空心圆圈图。每个部门应该跨越一个百分比。

问题陈述：如果看到输出，那么形成圆圈的3种颜色应该占据圆圈的百分比。例如，如果颜色1 = 33％，颜色2 = 33％，颜色3 = 33％，那么圆圈应该以三种相同的颜色比例。现在圆圈不是根据颜色的百分比来划分的。任何帮助都将受到高度赞赏。

编辑：可以使用html canvas实现吗？

.a{
    margin: 0;
    width: 90px;
    text-align: center;
    height: 90px;
    border-radius: 50%;
    border: 4px solid transparent;
    background-size: 100% 100%, 50% 50%, 50% 50%;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), 
                    linear-gradient(30deg, rgb(240,120,16) 100%, lightgrey 0%),
                    linear-gradient(120deg, rgb(127,127,127) 100%, lightgrey 0%),
                    linear-gradient(310deg, rgb(255,192,0) 100%, lightgrey 0%);
    
    background-position: center center, left top, right top, left bottom, right bottom;
    background-origin: content-box, border-box, border-box, border-box, border-box;
    background-clip: content-box, border-box, border-box, border-box, border-box; 
}

<div class="a"></div>

Answer 1

您可以像这样调整代码：

＆＃13;

.a{
    margin: 0;
    width: 90px;
    text-align: center;
    height: 90px;
    border-radius: 50%;
    background-size:50% 100% ,100% 50%,100% 100%;
    background-position:100% 0,0 100%,0 0;
    background-repeat: no-repeat;
    background-image:
    linear-gradient(33deg,transparent 37%, green 0),     
    linear-gradient(-33deg, red 70%, blue 0%),     
    linear-gradient(to right, blue 50%, green 50%);
    position:relative;
}
.a:before {
  content:"";
  position:absolute;
  top:5px;
  right:5px;
  left:5px;
  bottom:5px;
  background:#fff;
  border-radius:50%;
}

＆＃13;

<div class="a"></div>

＆＃13;

顺便说一句，它更适合考虑使用SVG或更准确的工具来创建这样的图表。这是SVG的一个想法：

＆＃13;

.pie {
  width: 100px;
}

.pie circle {
  fill: none;
  stroke-width: 4;
  stroke-dasharray:55 110
}

＆＃13;

<svg viewBox="0 0 64 64" class="pie">
  <circle r="40%" cx="50%" cy="50%"  stroke="red">
  </circle>
  <circle r="40%" cx="50%" cy="50%"  stroke=" green" stroke-dashoffset=" -55">
  </circle>
  <circle r="40%" cx="50%" cy="50%" stroke="blue" stroke-dashoffset="-110">
  </circle>
 
</svg>

＆＃13;

具有百分比颜色分区的空心圆

1 个答案: