SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 172 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

11 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

  • Refonte de l’identité graphique

    10 juillet – 32 commentaires

    Lors de la SPIP Party 2017 à Toulouse, un nouveau contributeur est venu nous présenter son travail sur une refonte du logo. Au delà de la refonte du logo, c’est une toute nouvelle identité graphique pour SPIP que Jordan nous propose. Voici une (...)

  • Agenda Fullcalendar facile

    29 octobre 2016 – 34 commentaires

    Dans un précédent article, nous expliquions comment afficher un agenda Fullcalendar sur son site avec le plugin agenda. Cependant, ceci nécessite des manipulation de squelettes, ce qui n’est pas toujours évident lorsqu’on débute. La présente (...)

  • La Fabrique

    20 avril 2012 – 315 commentaires

    La Fabrique est un outil pour webmestres ou développeurs qui souhaitent créer des plugins. La Fabrique est capable de générer le code source minimal d’un plugin pour SPIP 3 (elle accélère donc le démarrage d’un plugin) et peut s’occuper également de (...)

  • Formulaire upload

    25 septembre 2012 – 34 commentaires

    Ce plugin permet d’uploader des documents depuis l’espace public Objectifs Ce plugin permet d’ajouter un formulaire dans l’espace public pour uploader et gérer des fichiers. A priori, il peut se greffer sur tous types objets SPIP : articles, (...)

  • Publier archivelist.txt via svn/terminal

    10 août 2009 – 11 commentaires

    Objectif : mettre à jour l’index archivelist.txt Environnement : commandes svn via terminal Si vous désirez voir publié dans la zone la version paquet de votre contribution, il faut ajouter la ligne nécessaire dans le fichier archivelist.txt. (...)

Ça spipe par là