Indicatore di percentuale circolare con Canvas (dynCircle) in JavaScript

Quello che segue è un esempio di utilizzo di un canvas in JavaScript per la realizzazione di un indicatore di percentuale circolare;
per utilizzarlo, inserisci un canvas in pagina

HTMLCopia

<canvas id="sgart-canvas-circle" data-value="45" data-max="100" data-line="8" width="100" height="75">
	canvas non supportati
</canvas>

gli attributi data-* sono utilizzati per impostare i valori di default:

• data-value per impostare il valore attuale
• data-max per impostare il valore massimo visualizzabile
• data-line per impostare lo spessore del bordo
• data-canvas-color per impostare il colore di sfondo del canvas
• data-fill-color per impostare il colore di sfondo del grafico
• data-border-color per impostare il colore del bordo
• data-value-color per impostare il coore del bordo che rappresenta il valore attuale (data-value)

per funzionare serve la seguente funzione JavaScript sgart.dynCircle:

JavaScriptCopia

var sgart=sgart||{};
sgart.dynCircle= function(objId,newValue) {
  //recupero l'elemento contenitore
  var canvas = document.getElementById(objId);

  //recupero i valori per i calcoli successivi o imposto i default

  //massimo valore
  var dataMax=parseFloat(canvas.getAttribute("data-max") || 100.0); //se non ho un massimo specificato considero 100
	
  //recupero il valore  attuale
  if(typeof newValue!=="undefined" && newValue!=null)	{ //se passo un valore vince questo 
    canvas.setAttribute("data-value", newValue);	//lo memorizzo
  }
  var dataValue=parseFloat(canvas.getAttribute("data-value"));
  //controllo i limiti
  if(dataValue<0) dataValue=0;
  if(dataValue>dataMax) dataValue=dataMax;

  //larghezza del bordo
  var dataLine=parseFloat(canvas.getAttribute("data-line") || 5);	//leggo o imposto un default

  //recupero il colore di riempimento del canvas
  var dataCanvasColor=canvas.getAttribute("data-canvas-color") || "transparent";	//leggo o imposto un default

  //recupero il colore di riempimento del canvas
  var dataFillColor=canvas.getAttribute("data-fill-color") || "#555";	//leggo o imposto un default

  //recupero il colore del bordo 
  var dataBorderColor=canvas.getAttribute("data-border-color") || "#ddd";	//leggo imposto un default

  //recupero il colore del bordo che rappresenta il valore
  var dataValueColor=canvas.getAttribute("data-value-color") || "red";	//leggo o imposto un default
	
  //ricavo il contesto per disegnare
  var ctx = canvas.getContext("2d");

  //pulisco la superficie
  ctx.clearRect(0, 0, canvas.width, canvas.height);	

  //setto le variabili interne
  var w=canvas.width;
  var h=canvas.height;
  var wh= w>h?h:w;	//trovo la dimensione minore (raggio)
  var cx=w/2;	//centro
  var cy=h/2;

  ctx.fillStyle=dataCanvasColor; //"blue";
  ctx.fillRect(0,0,w,h);

  var r= wh/2-dataLine/2;	//raggio effettivo senza bordo
  ctx.beginPath();
  ctx.arc(cx,cy,r,0,2*Math.PI);
  ctx.fillStyle = dataFillColor; //'#555';
  ctx.fill();
	
  //disegno il bordo
  ctx.lineWidth = dataLine;
  ctx.strokeStyle = dataBorderColor;	//'#ddd';
  ctx.stroke();
	
  //trovo la percentuale sul massimo valore
  var p=100.0/dataMax*dataValue;

  //lo rapporto ai gradi  
  var startAngle=-Math.PI/2;
  var endAngle=startAngle+ p *(Math.PI/50);

  //disegno il bordo che rappresenta la percentuale
  ctx.beginPath();
  ctx.arc(cx,cy,r,startAngle,endAngle,false);
  ctx.lineWidth = dataLine;
  ctx.strokeStyle = dataValueColor //'red';
  ctx.stroke();
};

infine, setta eventuali valori via codice e richiama la funzione sgart.dynCircle:

JavaScriptCopia

//prendo il riferimento al canvas
var obj=document.getElementById("sgart-canvas-circle");

//imposto lo spessore della linea modificando l'attributo data-line
obj.setAttribute("data-line", 8);

//invoco l'aggiornamento passando anche il nuovo valore
sgart.dynCircle("sgart-canvas-circle", 78);

posso settare il valore anche agendo sull'attributo data-value:

JavaScriptCopia

//imposto lo spessore della linea modificando l'attributo data-value
obj.setAttribute("data-value", 78);

//invoco l'aggiornamento SENZA passare alcun valore
sgart.dynCircle("sgart-canvas-circle");