SPIP-Contrib

SPIP-Contrib

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

251 Plugins, 182 contribs sur SPIP-Zone, 174 visiteurs en ce moment

Accueil du site > Affichage multimédia > Images > JpGraph > plugin JpGraph : exemple avancé avec les diagrammes en barres

plugin JpGraph : exemple avancé avec les diagrammes en barres

3 novembre 2009 – par Olivier Gautier

10 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 barre ou accbarre (barres accumulées) 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=barre
|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>

Diagramme en barres, modèle de base

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 du contour des barres, 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 du contour des barres
  • éventuellement seconde valeur : la couleur de fond des barres
  • éventuellement troisième valeur : si cette valeur est renseignée, la couleur de fond est remplacée par un dégradé horizontal 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=barre
|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>

Diagramme en barre avec gestion des couleurs

Des données multiples

Vous pouvez afficher jusqu’à trois séries de données en renseignant les paramètres donneedeux et donneetrois.
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=barre
|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
|legendedeux=Donald;Tic;Tac
|legendetrois=Jours;Nombre de noisettes>

Diagramme en barres avec 3 séries de données

Sous forme de barres accumulées

Le même diagramme que ci-dessus peut être présenté sous forme de barres accumulées en modifiant le paramètre type_graphe : on indiquera la valeur accbarre à la place de barre.

Code utilisé dans le graphique ci-dessous :

<jpgraph
|type_graphe=accbarre
|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;green:1.5
|couleurdeux=red;red:0.5;red:1.5
|couleurtrois=blue;blue:0.5;blue:1.5
|legendedeux=Donald;Tic;Tac
|legendetrois=Jours;Nombre de noisettes>

Diagramme en barres accumulées

Répondre à cet article

Retour en haut de la page

Ça discute par ici

  • Le plugin saveauto : sauvegarde automatique de la base de données de SPIP

    27 novembre 2006 – 73 commentaires

    Le plugin saveauto permet de réaliser automatiquement une sauvegarde de la base de données de SPIP selon une fréquence et des paramètres configurables.

  • CleverMail

    20 janvier – 71 commentaires

    CleverMail est un plugin permettant d’envoyer des lettres d’informations à des abonnés depuis SPIP. Issu au départ d’un développement libre complètement indépendant de SPIP, il a connu une première version pour SPIP 1.9 avant d’être complètement réécris (...)

  • Diapos

    10 mars – 38 commentaires

    Comme son nom l’indique, c’est un (petit) plugin qui rappelle un peu le fonctionnement d’un projecteur de diapositives. Seules contraintes : il nous faut des images ayant la même largeur et il nous faut numéroter les images. Il suffit pour cela de (...)

  • Forms&Tables 2.0

    31 décembre 2009 – 136 commentaires

    Gestion et administration de formulaires éditables. Ce plugin permet également la publication de sondages et enquètes, la collecte des réponses dans la base de données et le téléchargement au format csv. Ce plugin est une adaptation de la version pour (...)

  • SPIP Zen Garden

    12 novembre 2009 – 68 commentaires

    Le plugin Zen Garden [1], ou Jardin Zen, vous permet de gérer une galerie de thèmes pour votre site, et de changer très facilement de thèmes parmi les thèmes disponibles. Pré-requis Le jardin Zen nécessite d’utiliser un squelette comme le squelette (...)