1. Accueil
  2. PHP
  3. Sources PHP
  4. Sources Graphique
  5. Classe de graphiques (diagramme)

Classe de graphiques (diagramme)

Soyez le premier à donner votre avis sur cette source.

Vue 13 582 fois - Téléchargée 1 370 fois

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Signaler
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
 40
si tu veux jouer aux déterrages, remplace :
<? par <?php pour bien montrer que c'est pas un xml
et " par ' surtout quand t'as rien dedans...
et pour toi qui aime bien la POO, le php5 serait plus adapté à ce genre de choses
Signaler
Messages postés
3006
Date d'inscription
dimanche 14 avril 2002
Statut
Membre
Dernière intervention
31 décembre 2008
ah ben c sympa de prévenir en tt cas, ça fait plaisir.
je n'ai pas fait usage de cette classe et donc je n'ai pas tenté de l'améliorer, mais je suppose que c possible, toutefois, si je me souviens bien de la structure que je lui avait donnée, ça risque d'être assez gros comme modif. tu me diras quand ce sera online? ;-)
Signaler
Messages postés
728
Date d'inscription
jeudi 20 juin 2002
Statut
Membre
Dernière intervention
7 novembre 2007
 2
sinon j'utilise ta class pr un site pas encore online et je te mettrais un lien. je te recontacte qd j'upload le tout
bye
Signaler
Messages postés
728
Date d'inscription
jeudi 20 juin 2002
Statut
Membre
Dernière intervention
7 novembre 2007
 2
coucou
dis moi ce serait possible dans ta class de pouvoir mettre les colonnes par 2 (par exemple nb de visiteurs et nb de visites)/jour avec 2 couleurs diff?
Signaler
Messages postés
728
Date d'inscription
jeudi 20 juin 2002
Statut
Membre
Dernière intervention
7 novembre 2007
 2
moi je trouve ça cool
c pas mal pour les résultats des sondages
Afficher les 8 commentaires
S'inscrire maintenant

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.

Du même auteur (cs_Kirua)