Home / Questions / 64076
Accepted
hubman
Asked: 2020-04-20 20:00:30 +0800 CST 2020-04-20 20:00:30 +0800 CST

How to place percentage in the center of the circle?

  • 772

function circlePath(cx, cy, r, percentil) {
  var coordx = cx + r * Math.cos(2 * Math.PI * percentil / 100 - Math.PI / 2);
  var coordy = cy + r * Math.sin(2 * Math.PI * percentil / 100 - Math.PI / 2);
  var modif = percentil >= 50 ? "0 1,1" : " 1 0,1";
  var variables = "M" + cx + "," + cy + " L" + cx + "," + (cx - r) + " A" + r + "," + r + " " + modif + " " + coordx + ", " + coordy + " Z";

  var pathEl = document.getElementById("porcentaje");
  pathEl.setAttribute("d", variables);
  pathEl.setAttribute("fill", "red");
}

circlePath(120, 120, 120, 75);
<svg class="circulo" width="240" height="240" viewBox="0 0 240 240">
      <circle cx="120" cy="120" r="120" fill="#ebeced"></circle>
      <path id="porcentaje" d="" fill="#58d6a6"></path>
      <circle cx="120" cy="120" r="100" fill="#ffffff"></circle>
</svg>
<hr/>

<button onclick="circlePath(120,120,120,10)">10%</button>
<button onclick="circlePath(120,120,120,20)">20%</button>
<button onclick="circlePath(120,120,120,30)">30%</button>
<button onclick="circlePath(120,120,120,40)">40%</button>
<button onclick="circlePath(120,120,120,50)">50%</button>
<button onclick="circlePath(120,120,120,60)">60%</button>
<button onclick="circlePath(120,120,120,70)">70%</button>
<button onclick="circlePath(120,120,120,80)">80%</button>
<button onclick="circlePath(120,120,120,90)">90%</button>

javascript

2 Answers

  1. Best Answer

    Making use of the Text element taking into account the position in Xand inY

    <text x="90" y="130" font-family="sans-serif" font-size="20px" fill="blue" 
id="texto"></text>

    From Javascript you can assign a new value usingtextContent

    function circlePath(cx, cy, r, percentil){
      
      var coordx = cx + r * Math.cos( 2 * Math.PI * percentil / 100 - Math.PI / 2 );
      var coordy = cy + r * Math.sin( 2 * Math.PI * percentil / 100 - Math.PI / 2 );
      var modif = percentil >= 50 ? "0 1,1" : " 1 0,1";
      var variables = "M" + cx + "," + cy + " L" + cx +"," + (cx - r) + " A" + r + "," + r + " " + modif + " " + coordx + ", " + coordy + " Z";
      
      var pathEl = document.getElementById("porcentaje");
      pathEl.setAttribute("d", variables);
      pathEl.setAttribute("fill", "red");
      /* Asignar el Nuevo valor al Elemento Text*/
      document.getElementById('texto').textContent=percentil+"%";
 }

    circlePath(120,120,120, 75);
    <svg class="circulo" width="240" height="240" viewBox="0 0 240 240">
      <circle cx="120" cy="120" r="120" fill="#ebeced"></circle>
      <path id="porcentaje" d="" fill="#58d6a6"></path>
      <circle cx="120" cy="120" r="100" fill="#ffffff"></circle>
      <text x="100" y="130" font-family="sans-serif" font-size="20px" fill="blue" id="texto"></text>
</svg>
 <hr/>

    <button onclick="circlePath(120,120,120,10)">10%</button>
    <button onclick="circlePath(120,120,120,20)">20%</button>
    <button onclick="circlePath(120,120,120,30)">30%</button>
    <button onclick="circlePath(120,120,120,40)">40%</button>
    <button onclick="circlePath(120,120,120,50)">50%</button>
    <button onclick="circlePath(120,120,120,60)">60%</button>
    <button onclick="circlePath(120,120,120,70)">70%</button>
    <button onclick="circlePath(120,120,120,80)">80%</button>
    <button onclick="circlePath(120,120,120,90)">90%</button>

    • 4

  2. If it is possible using the SVG tag <text> , I attach an example of how to do it:

    function circlePath(cx, cy, r, percentil){
      
      var coordx = cx + r * Math.cos( 2 * Math.PI * percentil / 100 - Math.PI / 2 );
      var coordy = cy + r * Math.sin( 2 * Math.PI * percentil / 100 - Math.PI / 2 );
      var modif = percentil >= 50 ? "0 1,1" : " 1 0,1";
      var variables = "M" + cx + "," + cy + " L" + cx +"," + (cx - r) + " A" + r + "," + r + " " + modif + " " + coordx + ", " + coordy + " Z";
      
      var pathEl = document.getElementById("porcentaje");
      pathEl.setAttribute("d", variables);
      pathEl.setAttribute("fill", "red");

      var text = document.getElementById("text");
      text.innerHTML=percentil+"%";
    }

    circlePath(120,120,120, 75);
    <svg class="circulo" width="240" height="240" viewBox="0 0 240 240">
      <circle cx="120" cy="120" r="120" fill="#ebeced" />
      <path id="porcentaje" d="" fill="#58d6a6"></path>
      <circle cx="120" cy="120" r="100" fill="#ffffff" />
      <text id="text" x="120" y="120" style="fill:blue;"></text>
    </svg>

    <hr/>

    <button onclick="circlePath(120,120,120,10)">10%</button>
    <button onclick="circlePath(120,120,120,20)">20%</button>
    <button onclick="circlePath(120,120,120,30)">30%</button>
    <button onclick="circlePath(120,120,120,40)">40%</button>
    <button onclick="circlePath(120,120,120,50)">50%</button>
    <button onclick="circlePath(120,120,120,60)">60%</button>
    <button onclick="circlePath(120,120,120,70)">70%</button>
    <button onclick="circlePath(120,120,120,80)">80%</button>
    <button onclick="circlePath(120,120,120,90)">90%</button>

    • 1