Canvas con JavaScript, grafici a torta con javascript

In questo articolo parleremo ancora dei canvas con JavaScript.

Faremo un esempio molto semplice graficamente. Più avanti infatti vedremo come implementare i grafici utilizzando la libreria Chart.js, oggi vi indico per il momento solo il link alla libreria: chartjs.org.

Ipotizziamo quindi di prendere dei dati dalle caselle di input e realizzare un grafico a torta utilizzando proprio questi dati.

Inserite dunque i dati nelle caselle di input e dopo cliccate sul pulsante crea. Subito sotto vedrete il grafico a torta che si è generato.

Ecco come dovrebbe risultare l’esempio di utilizzo dei canvas con javascript:

Procedimento – uso di canvas con JavaScript per creare grafici

Innanzitutto inseriamo le caselle di input di tipo number, specificando l’id e aggiungiamo il button dove all’evento onclick() richiamiamo la funzione creaGrafico().

<input type="number" id="dato1">
<input type="number" id="dato2">
<input type="number" id="dato3">
<input type="number" id="dato4">
<button onclick="creaGrafico()" type ="button">crea</button>

Dopo inseriamo l’area dove generare il nostro grafico:

<canvas id="disegno" width="400" height="200">
Spiacente non supporto i canvas di HTML5 </canvas>

Infine creiamo la nostra funzione JavaScript.

Per crearla iniziamo a rendere disponibile l’oggetto come nell’esempio precedente:

var disegno=document.getElementById('disegno');
var context=disegno.getContext('2d');

Poi leggiamo i dati dalla casella di testo, utilizzando il metodo getElementById() come abbiamo spiegato negli articoli precedenti.

Adesso dobbiamo calcolare le ampiezze degli angoli dal valore immesso in input. Utilizziamo questa semplice proporzione:

angolo=valore * 2 PiGreco/totale.

Quindi calcoliamo il totale dei valori immessi in input e dopo ricaviamo gli angoli.

Infine iniziamo a creare le nostre porzioni di torta utilizzando il metodo beginPath() e closePath() per ogni porzione.

Allego lo script completo che utilizza i canvas con JavaScript per creare grafici a torta.

<script type="text/javascript">
function creaGrafico(){
   var disegno=document.getElementById('disegno');
   var context=disegno.getContext('2d');
   var input1=eval(document.getElementById('dato1').value);
   var input2=eval(document.getElementById('dato2').value);
   var input3=eval(document.getElementById('dato3').value);
   var input4=eval(document.getElementById('dato4').value);
   
   var total=input1+input2+input3+input4;

   var angle1=2*Math.PI*input1/total;
   var angle2=2*Math.PI*input2/total;
   var angle3=2*Math.PI*input3/total;
   var angle4=2*Math.PI*input4/total;
   
   context.beginPath();
      context.arc(100,100,50,0,angle1, false);
      context.lineWidth=2;
      context.lineTo(100,100);  
      context.fillStyle="rgba(255,255,0,1)";
      context.fill();
   context.closePath();

   context.beginPath();
      context.arc(100,100,50,angle1,angle2+angle1,false);
      context.lineWidth=2;
      context.lineTo(100,100);
      context.fillStyle="rgba(0,240,255,1)";
      context.fill();
   context.closePath();
   
   
   context.beginPath();
      context.arc(100,100,50,angle2+angle1,angle3+angle2+angle1,false);
      context.lineWidth=2;
      context.lineTo(100,100); 
      context.fillStyle="rgba(255,0,255,1)";
      context.fill();
   context.closePath(); 
  
   context.beginPath();
     context.arc(100,100,50,angle3+angle2+angle1,angle4+angle3+angle2+angle1,false);
      context.lineWidth=2;
      context.lineTo(100,100); 
      context.fillStyle="rgba(200,155,255,1)";
      context.fill();
   context.closePath();
}
</script>

In maniera simile si potrebbero ad esempio creare degli istogrammi, mi servirà in questo caso ad esempio il metodo fillRect().

Chiaramente questi sono solo dei semplici esempi di come realizzare grafici utilizzando i canvas con JavaScript.

Lezione precedente: JavaScript canvas