SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 116 visiteurs en ce moment

Accueil > Affichage multimédia > Images > JpGraph > plugin JpGraph : exemple avancé avec le tracé de courbes

plugin JpGraph : exemple avancé avec le tracé de courbes

3 novembre 2009 – par erational, Olivier Gautier

12 votes

L’article plugin JpGraph, à lire avant celui-ci, vous présente le fonctionnement général du plugin JpGraph.

Il vous est possible de configurer finement vos graphiques de type courbe en suivant les indications ci-dessous.

Modèle de base

Le modèle de base du plugin est assez simple et nécessite de renseigner les paramètres titre, donnee et legende. On peut compléter avec les paramètres largeur et hauteur (non obligatoires) afin d’obtenir une taille de graphique souhaitée.

Ainsi, le code suivant donnera le graphique ci-dessous.

<jpgraph
|type_graphe=courbe
|titre=Noisettes récoltées
|donnee=4;5;2;7;5;3;10
|legende=Lundi;Mardi;Mercredi;Jeudi;Vendredi;Samedi;Dimanche
|largeur=450
|hauteur=300
|legendetrois=Jours;Nombre de noisettes>

Premier modèle de courbe

On notera le champs legendetrois permettant de définir les légendes des axes horizontaux et verticaux (séparés par ; ).

Un peu de couleur

Afin d’améliorer l’apparence du graphique obtenu, il est possible de choisir la couleur de la courbe, ainsi qu’une couleur de fond, voire un effet de dégradé.

On choisira les couleurs parmi les noms de couleur autorisés en html.

Le paramètre à configurer est couleur et accepte trois valeurs séparés par «  ; ».

  • première valeur : la couleur de la ligne représentant la courbe
  • éventuellement seconde valeur : la couleur de fond de la partie située entre la courbe et l’axe horizontal.
  • éventuellement troisième valeur : si cette valeur est renseignée, la couleur de fond est remplacée par un dégradé vertical créé à l’aide de la seconde et la troisième valeur.

Concernant la couleur de fond, il est possible d’indiquer un degré de transparence (nombre décimal compris entre 0 et 1) et de noter le nom de couleur suivi de @ et du degré de transparence (voir l’exemple ci-dessous dans lequel purple@0.5 affichera un violet avec une transparence de 50%, ce qui laisse passer la trame de fond à travers la couleur violette).

Code utilisé dans le graphique ci-dessous :

<jpgraph
|type_graphe=courbe
|titre=Noisettes récoltées
|donnee=4;5;2;7;5;3;10
|legende=Lundi;Mardi;Mercredi;Jeudi;Vendredi;Samedi;Dimanche
|largeur=450
|hauteur=300
|couleur=blue;purple@0.5;green@0.5
|legendetrois=Jours;Nombre de noisettes>

Second modèle avec gestion des couleurs

Sous forme d’histogramme

En ajoutant |option=histogramme dans le modèle, le graphique généré est transformé en histogramme. On notera qu’il faut ajouter une donnée et une légende supplémentaire afin de faire apparaitre le dernier rectangle.

Code utilisé dans le graphique ci-dessous :

<jpgraph
|type_graphe=courbe
|titre=Noisettes récoltées
|donnee=4;5;2;7;5;3;10;10
|legende=Lundi;Mardi;Mercredi;Jeudi;Vendredi;Samedi;Dimanche;Lundi
|largeur=450
|hauteur=300
|couleur=blue;purple@0.5;green@0.5
|legendetrois=Jours;Nombre de noisettes
|option=histogramme>

Graphique en histogramme

Insérer des marqueurs

Si vous souhaitez insérer des points ou marqueurs, vous pouvez utiliser le paramètre marqueur qui peut contenir une à quatre valeurs séparées par «  ; ».

  • première valeur : choix de la forme de marqueur
  • éventuellement seconde valeur : taille du marqueur (choisir un nombre entier)
  • éventuellement troisième valeur : couleur du contour du marqueur
  • éventuellement quatrième valeur : couleur de fond du marqueur

La forme doit être choisie parmi les possibilité suivantes :

Nom de la forme du marqueurEffet produit
carre carré
triangle triangle
triangle_bas triangle (avec pointe en bas)
losange losange
cercle cercle (vide)
disque cercle (plein)
croix croix (forme +)
croix_x croix (forme x)
etoile étoiles

Code utilisé dans le graphique ci-dessous :

<jpgraph
|type_graphe=courbe
|titre=Noisettes récoltées
|donnee=4;5;2;7;5;3;10
|legende=Lundi;Mardi;Mercredi;Jeudi;Vendredi;Samedi;Dimanche
|largeur=450
|hauteur=300
|marqueur=disque;6;red;yellow
|couleur=blue;green@0.5:0.5;green@0.5:1.5
|legendetrois=Jours;Nombre de noisettes>

Graphique avec des marqueurs

On notera que le dégradé est créé à partir de la même couleur, même degré de transparence mais avec deux degrés de brillance différents (0.5 et 1.5). Le degré de brillance est un nombre décimal compris entre 0 et 2 et indiqué après le symbole «  : ».

Avec plusieurs séries de données

Vous pouvez afficher jusqu’à trois séries de données en renseignant les paramètres donneedeux et donneetrois. Par ailleurs, il est possible d’ajouter des marqueurs particuliers pour ces trois séries (paramètres marqueurdeux et marqueurtrois).
Dans le cas de plusieurs séries de données, il peut être utile d’afficher une légende indiquant les populations concernées par les différentes séries ; on utilisera le paramètre legendedeux pour cela.

Code utilisé dans le graphique ci-dessous :

<jpgraph
|type_graphe=courbe
|titre=Noisettes récoltées
|donnee=1;0;2;1;1;2;1
|donneedeux=4;5;2;7;5;3;10
|donneetrois=3;7;8;12;11;8;6
|legende=Lundi;Mardi;Mercredi;Jeudi;Vendredi;Samedi;Dimanche
|largeur=450
|hauteur=300
|couleur=green;green@0.5:0.5;green@0.5:1.5
|couleurdeux=red;red@0.5:0.5;red@0.5:1.5
|couleurtrois=blue;blue@0.5:0.5;blue@0.5:1.5
|marqueur=disque;5;green:1.8;green:0.4
|marqueurdeux=etoile;5;red:1.8;red:0.4
|marqueurtrois=carre;5;blue:1.8;blue:0.4
|legendedeux=Donald;Tic;Tac
|legendetrois=Jours;Nombre de noisettes>

Graphique à 3 séries de données

Dernière modification de cette page le 3 novembre 2009

Retour en haut de la page

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Galleria (fr)

    16 novembre 2011 – 193 commentaires

    Une galerie d’image qui utilise la librairie javascript Galleria. Description Ce plugin vous permet d’ajouter des galeries d’images à vos articles. La galerie créée utilise la librairie javascript Galleria. Le plugin propose un modèle nommé (...)

  • Une licence pour un article

    18 avril 2007 – 51 commentaires

    Sur une idée originale de erational, voici un plugin permettant de lier une licence à un article.

  • PHANTOM (HTML5UP)

    18 juillet – commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)

  • ScolaSPIP 4

    19 janvier 2016 – 371 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • Newsletters

    16 janvier 2013 – 474 commentaires

    Ce plugin permet de composer des Info-lettres. Par info-lettre, on désigne ici le contenu éditorial qui va être composé et envoyé par courriel à une liste d’inscrits. Le plugin permet de composer une info-lettre à partir d’un modèle pré-composé, (...)