Anzeige Prozentsatz Bogen in Javascript

wie Prozent der Form ein Kreis oder Bogen in JavaScript anzuzeigen. Ich möchte den schwarzen Farbumfang in Prozent anzeigen. Say Wenn ich den maximalen Wert 20 und den minimalen Wert 10 eingabe, sollte 50% eines Kreises (Bogen) angezeigt werden. Wie geht das ?.Anzeige Prozentsatz Bogen in Javascript

<!DOCTYPE html> 
<html> 
    <body> 

    //displays circle with dimensions 
    <svg height="300" width="300"> 
     <circle cx="150" cy="100" r="90" stroke="brown" stroke-width="10" fill="white"/> 
    </svg> 
    <br/><br/> 

    maxValue: <input type="text" value="" id="value1" /><br/> 
    minValue: <input type="text" value="" id="value2" /><br/> 
    <input type="button" value="Stroke-percentage" onclick="" /> 
    stroke-percentage = maxValue/minValue * 100 
    </body> 
</html>

Quelle

2017-09-20 Krithika

Prüfung [diese] (https://codepen.io/JMChristensen/ Stift/Ablch) – Durga

HTML-Code:

<!DOCTYPE html> 
    <html> 
    <body> 
    <svg id="svg" width="200" height="200" viewport="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
     <circle r="90" cx="100" cy="100" fill="transparent" stroke-width="1em" stroke-dasharray="565.48" stroke-dashoffset="0" stroke="#666"></circle> 
     <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="297.48" stroke-dashoffset="0" stroke="red" stroke-width="1em"></circle> 
    </svg> 

    Value: <input type="text" value="" id="value1" /><br/> 
    <input type="button" value="Stroke-percentage" id="generateProgress" /> 
    </body> 
    </html>

JQuery-Skript:

$('#generateProgress').on('click', function(){ 
    var val = parseInt($('#value1').val()); 
    var $circle = $('#svg #bar'); 

    if (isNaN(val)) { 
    val = 100; 
    } 
    else{ 
    var r = $circle.attr('r'); 
    var c = Math.PI*(r*2); 
    if (val < 0) { val = 0;} 
     if (val > 100) { val = 100;} 
      var pct = ((100-val)/100)*c; 
      $circle.css({ strokeDashoffset: pct}); 
      $('#cont').attr('data-pct',val); 
    } 
});

Quelle

2017-09-20 08:44:56 santho

Danke ... aber ich möchte keine Bibliothek benutzen. Kann es in einfachem Javascript – Krithika

Santho Antwort ist richtig für SVG, aber ich möchte HTML5 das Canvas-Element als Alternative erwähnen:

/** 
 
* arcPercentage 
 
* 
 
* @param {{ radius?: number, rate?: number, color?: string }} parameters 
 
* @returns 
 
*/ 
 
function arcPercentage(parameters) { 
 
    var radius = (parameters.radius !== void 0 ? parameters.radius : 100); 
 
    var rate = (parameters.rate !== void 0 ? parameters.rate : 1); 
 
    var color = (parameters.color !== void 0 ? parameters.color : "rgba(255,0,0,1)"); 
 
    var c = document.createElement("canvas"); 
 
    var size = c.width = c.height = radius * 2; 
 
    var ctx = c.getContext("2d"); 
 
    if (rate == 0) { 
 
    return c; 
 
    } 
 
    ctx.fillStyle = color; 
 
    ctx.beginPath(); 
 
    //Start in origo 
 
    ctx.arc(radius, radius, 0, 0, 0); 
 
    //Move to start position 
 
    ctx.arc(radius, radius, radius, 0, 0); 
 
    //Arc to percentage 
 
    ctx.arc(radius, radius, radius, 0, (Math.PI * 2) * rate); 
 
    //move to origo 
 
    ctx.arc(radius, radius, 0, (Math.PI * 2) * rate, (Math.PI * 2) * rate); 
 
    ctx.fill(); 
 
    ctx.closePath(); 
 
    return c; 
 
} 
 

 
//TEST 
 
//Get nodes 
 
var inputNode = document.getElementById("circle-input"); 
 
var imageNode = document.getElementById("circle-image"); 
 
//Bind event 
 
inputNode.onchange = inputNode.onkeyup = inputNode.onmouseup = function() { 
 
    //Only fire if valid input 
 
    if (inputNode.validity.valid) { 
 
    //Parse value 
 
    var value = parseInt(inputNode.value, 10)/100; 
 
    //Draw the arc 
 
    imageNode.src = arcPercentage({ 
 
     color: "blue", 
 
     radius: 100, 
 
     rate: value 
 
    }).toDataURL(); 
 
    } 
 
};

<input id="circle-input" min="0" max="100" type="number" value="0"> 
 
<br/> 
 
<img id="circle-image">

Quelle

2017-09-20 09:03:11

@absoluty richtig gemacht werden –

HTML-Code:

<!DOCTYPE html> 
    <html> 
    <body> 
    <svg id="svg" width="200" height="200" viewport="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
     <circle r="90" cx="100" cy="100" fill="transparent" stroke-width="1em" stroke-dasharray="565.48" stroke-dashoffset="0" stroke="#666"></circle> 
     <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="297.48" stroke-dashoffset="0" stroke="red" stroke-width="1em"></circle> 
    </svg> 

    Value: <input type="text" value="" id="value1" /><br/> 
    <input type="button" value="Stroke-percentage" onclick="generateProgress()" /> 
    </body> 
    </html>

JQuery-Skript:

$('#generateProgress').on('click', function(){ 
    var val = parseInt($('#value1').val()); 
    var $circle = $('#svg #bar'); 

    if (isNaN(val)) { 
    val = 100; 
    } 
    else{ 
    var r = $circle.attr('r'); 
    var c = Math.PI*(r*2); 
    if (val < 0) { val = 0;} 
     if (val > 100) { val = 100;} 
      var pct = ((100-val)/100)*c; 
      $circle.css({ strokeDashoffset: pct}); 
      $('#cont').attr('data-pct',val); 
    } 
});

Javascript-Code:

var value = document.getElementById("value1"); 
function generateProgress() { 
    var val = parseInt(value); 
    var circle = document.getElementById('bar'); 

    if (isNaN(val)) { 
     val = 100; 
    } 
    else{ 
    var r = circle.getAttribute('r'); 
    var c = Math.PI*(r*2); 
    if (val < 0) { val = 0;} 
     if (val > 100) { val = 100;} 
      var pct = ((100-val)/100)*c; 
      circle.style.strokeDashoffset = pct; 
    } 

}

Quelle

2017-09-20 09:36:39 santho

Anzeige Prozentsatz Bogen in Javascript

Antwort

Verwandte Themen