SPIP-Contrib

SPIP-Contrib

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

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

Accueil > 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

13 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

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

  • SkelEditor 2.0

    1er mars 2010 – 79 commentaires

    La version remaniée et enrichie du plugin, pour SPIP 2.1, qui vous permet d’éditer votre squelette directement en ligne sans passer dans le FTP Ce plugin vous permet d’éditer les fichiers du squelette courant depuis l’interface privé. Cela peut (...)

  • Albums 3

    8 août 2014 – 287 commentaires

    Le plugin « Albums » évolue dans une version 3 pour SPIP 3. Avant d’effectuer une mise à jour depuis la version 1 ou 2, consultez les notes sur la rétro-compatibilité. Les modèles, notamment, on reçut quelques changements pour la bonne cause. En (...)

  • Menu animé déroulant

    16 août 2015 – 60 commentaires

    Barre de menu dynamique multi niveaux - adaptation aisée (?) des couleurs et dimensions - convient aussi aux petits écrans (mobiles).

  • Réservations multiples

    4 juillet – commentaires

    Permettre aux utilisateurs d’effectuer de réservations multiples (réserver pour plusieurs personnes à la fois ou réserver un événement plusieurs fois) Dépendances Saisies Réservation d’événements Introduction Il y a deux manières de multiplier les (...)

  • PHANTOM (HTML5UP)

    18 juillet – 32 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 (...)