How to put percentage in the center of the circle?

Question

How to put percentage in the center of the circle?

Navigation

#1 by (4 votes)
#2 by (1 votes)

5

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 svg

asked by hubman 20.04.2017 в 06:00

source

2 answers

1

If possible using the SVG tag <text> , 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>

answered by 20.04.2017 в 06:47

Incomplete types and opaque pointers Custom InfoWindow marker with data on Android

score 4 · Accepted Answer

Using the element Text taking into account the position in X and in Y

<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 using textContent

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>