Créer une Jauge Circulaire avec les Canvas

Sources : http://www.grafikart.fr/tutoriels/jquery/canvas-jauge-circulaire-317

Ce programme fonctionne avec la librairie Jquery

jauge-circulaire.html

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
<head>
<title>Cr&eacute;er une Jauge Circulaire avec les Canvas</title>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
 
 
<!-- Style CSS -->
<link rel='stylesheet' type='text/css' href='jauge-circulaire.css' />
 
 
 
</head>
<body>
 
 
<input type='text' name='compteur' value='30' class='compteur' data-min='0' data-max='100' />
 
<input type='text' name='compteur' value='55' class='compteur' data-min='0' data-max='200'
 data-color='#ff0000' data-taille='60' />
 
<input type='text' name='compteur' value='5' class='compteur' data-min='0' data-max='10'
 data-color='#00ff00' data-taille='20' />
 
 
<!-- Javascript -->
<script language='Javascript' type='text/javascript'
 src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script language='Javascript' type='text/javascript'
 src='jauge-circulaire-fonction-dessin-jauge.js'></script>
<script language='Javascript' type='text/javascript'
 src='jauge-circulaire.js'></script>
 
</body>
</html>

Télécharger le fichier

jauge-circulaire-fonction-dessin-jauge.js

function dessin_jauge(element_div , taille , ratio , color , ombre , contexte){
 
 if(contexte===true){
 
 var circle = $('<canvas width="'+(taille*2)+'px" height="'+(taille*2)+'px" />');
 element_div.append(circle);
 // on configure notre plan de travail : 2 dimentions
 var ctx = circle[0].getContext('2d');
 
 }else{
 
 ctx = contexte;
 
 }
 
 // d�but du dessin
 ctx.beginPath();
 // on dessine un cercle
 ctx.arc(taille,taille,(taille/100*85), -1/2*Math.PI , ratio*2*Math.PI-1/2*Math.PI);
 // taille du bord
 ctx.lineWidth = (taille/100*20);
 //couleur du bord
 ctx.strokeStyle = color;
 
 if(ombre){
 
 //position de l'ombre
 ctx.shadowOffsetX = (taille/100*1.5);
 // taille de l'ombre
 ctx.shadowBlur = (taille/100*8);
 //couleur de l'ombre
 ctx.shadowColor='rgba(0,0,0,0.5)';
 
 }
 
 //fin du dessin
 ctx.stroke();
 
 return ctx;
 
}

Télécharger le fichier

jauge-circulaire.js

(function($){
 
 // on entour le champs texte avec une Div qui contiendra notre jauge
 $('input.compteur').wrap('<div class="compteur" />').each(function(){
 
 // initialisation des variables
 var element_input = $(this); // le champs texte
 var element_div = element_input.parent(); // la div
 // on r�cup�re la valeur minimum de la jauge
 var min = element_input.data('min');
 // puis le maximum
 var max = element_input.data('max');
 //la couleur de la jauge
 var color = element_input.data('color') ? element_input.data('color') : "#91c2ff" ;
 // sa taille
 var taille = element_input.data('taille') ? element_input.data('taille') : 100 ;
 // on r�cup�re la valeur par d�faut de la jauge et la transporme en pourcentage
 var ratio = ( element_input.val() - min ) / ( max - min );
 
 // on met en forme la div et le champs texte
 element_div.width(taille*2)
  .height(taille*2);
 element_input.width(taille)
   .css("font-size",(taille/100*60)+"px")
   .css("top",(taille/100*60)+"px")
   .css("left",(taille/100*50)+"px");
 
 //on dessine la jauge circulaire � l'aide du canevas
 dessin_jauge(element_div , taille , 1 , "#fff" , true , true);
 
 //on dessine le niveau de la jauge circulaire
 var contexte = dessin_jauge(element_div , taille , ratio , color , false , true);
 
 // cr�ation d'un �v�nement : souris cliqu�e
 element_div.mousedown(function(event){
 
 // on supprimer tout �v�nement qui pourrai parasiter notre animation
 event.preventDefault();
 
 // cr�ation d'un �v�nement : souris en mouvement
 element_div.bind('mousemove' , function(event){
 
 // on r�cup�re la position de la souris
 var x = event.pageX - element_div.offset().left - element_div.width() / 2;
 var y = event.pageY - element_div.offset().top - element_div.height() / 2;
 
 // on calcule l'angle de la jauge de couleur
 var ratio = Math.atan2(x,-y) / (2*Math.PI);
 if(ratio<0){ ratio+=1;}
 
 //on efface l'ancienne jauge de couleur
 contexte.clearRect(0,0,(taille*2),(taille*2));
 
 //on redessine la jauge de couleur avec les nouvelles valeurs
 dessin_jauge(element_div , taille , ratio , color , false , contexte);
 
 // le champs texte obtient la nouvelle valeur arrondie
 element_input.val(Math.round( ratio * ( max - min ) + min ) );
 
 });
 
 // cr�ation d'un �v�nement : souris d�-cliqu�e
 }).mouseup(function(event){
 
 event.preventDefault();
 element_div.unbind('mousemove');
 
 });
 
 
 });
 
})(jQuery);

Télécharger le fichier

jauge-circulaire.css

div.compteur{
 float:left;
 display:inline;
 position:relative;
 margin:50px;
 width:200px;
 height:200px;
}
 
div.compteur input{
 position:absolute;
 top:65px;
 left:50px;
 font-size:60px;
 text-align:center;
 width:100px;
 border:none;
 background:none;
 outline:none;
 line-height:1em;
}
 
div.compteur canvas{
 position:absolute;
 top:0;
 left:0px;
 right:0px;
 bottom:0px;
}

Démonstration

Créer une Jauge Circulaire avec les Canvas