Classe de graphiques (diagramme)

Description

Ceci est en fait une double source.
Il y a a ci-dessous le code encapsulé dans une classe, ce qui présente comme avantage: une configuration aisée et complète de tous les aspects du graphe, mais en désavantage que l'image est d'abord stockée sur le disque dur et puis envoyée.

vous trouverez dans le zip la version non-classe, qu'il faut appeler avec un <img src="graphe.php?...">

à savoir qu'il ya a à chaque fois une version PNG et une version JPG.

infos sur le contenu du zip:

affgraphe.php: un exemple d'utilisation de la classe (affiche un double graphe des résultats de lancés de 2 dés (voyez le screenshot pr les valeurs absolues)

graph.php: la classe en question. à inclure simplement via un include()

graphe.php: script à appeler par l'intermédiaire d'un <img>. A noter que pour le configurer, il faut modifier le fichier, ce qui n'est pas le cas de la classe.

grapheJPG.php: même chose mais renvoit un JPEG et pas un PNG.

pour avoir un JPEG et pas un PNG avec la classe, il faut modifier les entêtes (début de code) et les fonctions imageTYPE(); (en fin de code) dans le fichier de la classe

Source / Exemple :


<?
class graph
{
 var $Lgraph = 500;		//largeur totale du graphe (de l'image)
 var $Hgraph = 400;		//hauteur totale du graphe (de l'image)
 var $Marge  =  30;		//marge entre le cadre et les axes
 var $Espace =  12; 	//espace entre chaque bâton
 var $Font   =   4;		//numéro de la police d'écriture
 var $Titre;			//titre du graphe
 var $ImageFond;		//facultatif, l'image de fond
 var $Donnees;			//le tableau associatif qui contient les données
 var $im;				//l'image à proprement parler

 var $CouleurFond   = Array(220, 220, 220);	//couleur de fond du graphe
 var $CouleurCadre  = Array(32, 72, 174);	//couleur du cadre
 var $CouleurBatons = Array(32, 52, 107);	//couleur des bâtons
 var $CouleurAxes   = Array(119, 31, 112);	//couleur des axes
 var $CouleurNotes  = Array(58, 92, 63);	//couleur des annotations textuelles
 var $CouleurVal    = Array(128, 128, 128);	//couleur des valeurs
 var $CouleurMax    = Array(255, 0, 0);		//couleur de la plus grande valeur
 
 
 
 //constructeur
 function graph()
 {
 }
 
 //dessin, il faudra d'abord récupérer les données dans le tableau prévu. paramètres facultatifs: fichier de dest., étiré ou non
 function dessiner($FicDest="", $etire=0)
 {
  $this->im = ImageCreate ($this->Lgraph, $this->Hgraph);
  
  //allocation des couleurs
  $clFond = ImageColorAllocate($this->im, $this->CouleurFond[0], $this->CouleurFond[1], $this->CouleurFond[2]);
  $clCadre = ImageColorAllocate($this->im, $this->CouleurCadre[0], $this->CouleurCadre[1], $this->CouleurCadre[2]);
  $clBatons = ImageColorAllocate($this->im, $this->CouleurBatons[0], $this->CouleurBatons[1], $this->CouleurBatons[2]);
  $clAxes = ImageColorAllocate($this->im, $this->CouleurAxes[0], $this->CouleurAxes[1], $this->CouleurAxes[2]);
  $clNotes = ImageColorAllocate($this->im, $this->CouleurNotes[0], $this->CouleurNotes[1], $this->CouleurNotes[2]);
  $clVal = ImageColorAllocate($this->im, $this->CouleurVal[0], $this->CouleurVal[1], $this->CouleurVal[2]);
  $clMax = ImageColorAllocate($this->im, $this->CouleurMax[0], $this->CouleurMax[1], $this->CouleurMax[2]);
  
  //chargement de l'image de fond
  if(trim($this->ImageFond) != "")
  {
   $ImFond = ImageCreateFromPNG($this->ImageFond);
   if($etire)
    ImageCopyResized($this->im, $ImFond, 1, 1, 0, 0, $this->Lgraph-2, $this->Hgraph-2, ImageSX($ImFond), ImageSY($ImFond));
   else
    ImageCopy($this->im, $ImFond, 1+$this->Marge, 1+$this->Marge, 0, 0, ImageSX($ImFond), ImageSY($ImFond));
   ImageDestroy($ImFond);
  }

  //dessin du cadre et des axes
  ImageRectangle($this->im, 0, 0, $this->Lgraph-1, $this->Hgraph-1, $clCadre);
  ImageLine($this->im, $this->Marge, $this->Marge, $this->Marge, $this->Hgraph-$this->Marge, $clAxes);
  ImageLine($this->im, $this->Marge, $this->Hgraph-$this->Marge, $this->Lgraph-$this->Marge, $this->Hgraph-$this->Marge, $clAxes);

  //détermination de la place dispo, largeur des batons, rapport de hauteur etc...
  $Hdispo = $this->Hgraph-2*$this->Marge-1-$this->Espace;	//1 pr la largeur de l'axe
  $Ldispo = $this->Lgraph-2*$this->Marge-1;			//idem
  $nbDonnees = count($this->Donnees);
  $max = max($this->Donnees);
  $Lbatons = $Ldispo/$nbDonnees-$this->Espace; 	//largeur de chaque bâton
  $rapportH = $Hdispo/$max;						//la rapport à appliquer entre la hauteur et la valeur

  //dessin des batons !!!!!!! les coordonnees ordinateurs !! (0,0) est au dessus à gauche !!
  $n = 0;
  reset($this->Donnees);
  foreach($this->Donnees as $cle => $val)
  {
   //dessine le baton
   $Hpix = round($val*$rapportH);
   $X1 = $this->Marge+1+$this->Espace/2+$n*($Lbatons+$this->Espace);
   $X2 = $X1+$Lbatons;
   $Y1 = $this->Hgraph-($Hpix+$this->Marge+1);
   $Y2 = $this->Hgraph-$this->Marge-1;
   ImageFilledRectangle($this->im, $X1, $Y1, $X2, $Y2, $clBatons);

   //écrit le nom en dessous
   $Xnom = $X1+($Lbatons-(ImageFontWidth($this->Font)+0.5)*strlen($cle))/2;
   $Ynom = $this->Hgraph-$this->Marge;
   ImageString($this->im, $this->Font, $Xnom, $Ynom, $cle, $clNotes);

  //écrit la valeur au dessus
   $Xchiffre = $X1+($Lbatons-(ImageFontWidth($this->Font))*strlen($val))/2;
   $Ychiffre = $Y1-ImageFontHeight($this->Font)-1;
   if($val == $max)
    ImageString($this->im, $this->Font, $Xchiffre, $Ychiffre, $val, $clMax);
   else
    ImageString($this->im, $this->Font, $Xchiffre, $Ychiffre, $val, $clVal);

   $n++;
  }

  //traçage des tirets sur l'axe Y
  $intervalle = 1;
  while($intervalle*10 < $max/5) $intervalle *= 10;
  $InterPix = round($intervalle*$rapportH);
  $depacement = 2;
  for($nbtir=1; $nbtir<=$max/$intervalle; $nbtir++)
  {
   $X1tiret = $this->Marge-$depacement;
   $X2tiret = $this->Marge+$depacement;
   $Ytiret  = $this->Hgraph-($this->Marge+1+$InterPix*$nbtir);
   ImageLine($this->im, $X1tiret, $Ytiret, $X2tiret, $Ytiret, $clAxes);
  }

  //écriture du titre
  $Ltitre = ImageFontWidth($this->Font)*strlen($this->Titre);
  $Xtitre = ($this->Lgraph-$Ltitre)/2;
  $Ytitre = ($this->Marge-$this->Espace)/2+1;
  ImageString($this->im, $this->Font, $Xtitre, $Ytitre, $this->Titre, $clNotes);
  //si FicDest (argument de cette fonction) est donné on sauve sur le disque et renvoit la balise HTML d'affichage
  if(trim($FicDest) != "")
  {
   ImagePng ($this->im, $FicDest);
   echo "<img src=\"".$FicDest."\">";
  }
  //sinon on renvoti tel quel, mais ça donne des trucs bizarres, normal lol
  else ImagePng ($this->im);
  
  ImageDestroy($this->im);
  $this->im = ImageCreate ($this->Lgraph, $this->Hgraph);
 }
}
?>

Conclusion :


voici ce que vous pourrez configurer avant de générer le graphique:

var $Lgraph = 500; //largeur totale du graphe (de l'image)
var $Hgraph = 400; //hauteur totale du graphe (de l'image)
var $Marge = 30; //marge entre le cadre et les axes
var $Espace = 12; //espace entre chaque bâton
var $Font = 4; //numéro de la police d'écriture
var $Titre; //titre du graphe
var $ImageFond; //facultatif, l'image de fond
var $Donnees; //le tableau associatif qui contient les données
var $im; //l'image à proprement parler

var $CouleurFond = Array(220, 220, 220); //couleur de fond du graphe
var $CouleurCadre = Array(32, 72, 174); //couleur du cadre
var $CouleurBatons = Array(32, 52, 107); //couleur des bâtons
var $CouleurAxes = Array(119, 31, 112); //couleur des axes
var $CouleurNotes = Array(58, 92, 63); //couleur des annotations textuelles
var $CouleurVal = Array(128, 128, 128); //couleur des valeurs
var $CouleurMax = Array(255, 0, 0); //couleur de la plus grande valeur

à noter que pr les couleurs, il s'agit d'un tableau de 3 entrées: RVB (rouge vert bleu) valeur de 0 à 255.

exemple d'utilisation sans la classe:

<img src=graphe.php?"<?

echo "Jan=25&Fev=12&Mars=23&Avril=22";

?>">

et ça devrait aller ^^ l'intitulé à gauche, la valeur à droite.

pour la classe il y a un ficheir d'exemple

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.