SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 185 visiteurs en ce moment

Accueil > Affichage multimédia > Images > JpGraph > plugin JpGraph : exemple avancé avec les diagrammes circulaires (...)

plugin JpGraph : exemple avancé avec les diagrammes circulaires (camemberts)

7 novembre 2009 – par Olivier Gautier – commentaires

7 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 camembert ou camembert3d (diagrammes circulaires en trois dimensions) 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=camembert
|titre=Noisettes collectées
|donnee=45;27;18;4
|largeur=450
|hauteur=350
|legende=Spip;Tic;Tac;Donald>

Diagramme circulaire de base

Passage en trois dimensions

Le modèle en trois dimension se rédige de la même façon que le précédent mais en remplaçant type_graphe=camembert par type_graphe=camembert3d.

On notera qu’il est possible d’obtenir un graphique ayant une meilleure qualité (mais donc aussi plus longue à générer par votre serveur et plus lourde) en ajoutant l’option resolution_fine (voir ci-dessous). Cette option est aussi fonctionnelle avec le modèle camembert et permet de gommer certaines imperfections graphiques.

Autre option intéressante pour ce modèle de graphique : camembert_angle qui permet de définir l’angle de vue (en degrés) du diagramme circulaire. On notera que les deux options étudiées ici sont séparées par le symbole «  ; ».

Code utilisé dans le graphique ci-dessous :

<jpgraph
|type_graphe=camembert3d
|titre=Noisettes collectées
|donnee=45;27;18;4
|largeur=450
|hauteur=350
|legende=Spip;Tic;Tac;Donald
|option=resolution_fine;camembert_angle=35>

Diagramme circulaire en 3 dimensions

Un peu de couleur

Il vous est possible de définir un certain nombre de couleur d’affichage des diagrammes circulaires : le paramètre couleur permet de définir la couleur des lignes du diagramme (valable si la resolution_fine n’est pas activée, sinon, les lignes ne sont pas visibles), ainsi qu’un thème de couleurs pour les secteurs affichés (voir ci-dessous). Ces deux valeurs doivent être séparées par «  ; ».

Les couleurs de fond des secteurs des diagrammes circulaires se déclinent en quatre thèmes :
-  earth : le thème par défaut
-  sand
-  water
-  pastel

Enfin, si vous désirez modifier la couleur de fond générale du graphique, vous pouvez configurer l’option graphe_couleur_fond (voir l’exemple ci-dessous).

Code utilisé dans le graphique ci-dessous :

<jpgraph
|type_graphe=camembert
|titre=Noisettes collectées
|donnee=45;27;18;4
|largeur=450
|hauteur=350
|legende=Spip;Tic;Tac;Donald
|couleur=red;water
|option=resolution_fine;graphe_couleur_fond=beige>

Diagramme circulaire et thèmes de couleurs

Détacher un ou plusieurs secteurs

Il est possible d’écarter un ou plusieurs secteurs angulaires du centre du diagramme circulaire afin de le(s) mettre en valeur. Pour cela, on ajoutera l’option camembert_detacher à laquelle on fait prendre les valeurs des secteurs concernés, séparés par une virgule.
Ainsi, pour détacher les secteurs angulaires correspondants au second et au troisième secteurs angulaires, on écrira : camembert_detacher=2,3

Afin de choisir l’écart entre les secteurs détachés et le centre du diagramme, on pourra spécifier l’option camembert_ecart en lui attribuant une valeur entière (c’est 20 par défaut).

Code utilisé dans le graphique ci-dessous :

<jpgraph
|type_graphe=camembert3d
|titre=Noisettes collectées
|donnee=45;27;18;4
|largeur=450
|hauteur=350
|legende=Spip;Tic;Tac;Donald
|couleur=red;sand
|option=resolution_fine;
camembert_detacher=2,3;
camembert_ecart=40>

Diagramme circulaire 3D avec détachement de deux secteurs


Il est possible de détacher tous les secteurs angulaires en indiquant camembert_detacher=tout comme option.

Code utilisé dans le graphique ci-dessous :

<jpgraph
|type_graphe=camembert
|titre=Noisettes collectées
|donnee=45;27;18;4
|largeur=450
|hauteur=350
|legende=Spip;Tic;Tac;Donald
|couleur=#8B1A1A;pastel
|option=camembert_detacher=tout;>

Diagramme circulaire avec tous les secteurs détachés

Dernière modification de cette page le 8 novembre 2009

Retour en haut de la page

Vos commentaires

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

  • Mise à jour automatique des plugins

    5 octobre 2009 – 156 commentaires

    Une nouvelle lame du Couteau Suisse permet de visualiser les plugins nécessitant une mise à jour, tout comme SPIP lui-même ! Présentation Rendons à César ce qui est à César, voici un extrait de la présentation du Couteau Suisse pour sa lame « Mise (...)

  • Plugin Modèles media

    25 avril 2011 – 170 commentaires

    Les modèles , et produisent chacun un résultat différent et ce résultat, pour les images, dépend du fait qu’elle soit dans le portfolio ou non. Ce plugin propose une nouvelle série de modèles ayant un comportement unifié et indépendant du mode des (...)

  • Refonte de l’identité graphique

    10 juillet – 68 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 (...)

  • Mailsubscribers

    16 janvier 2013 – 306 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • Saisies

    27 mars 2010 – 490 commentaires

    Introduction Créer un formulaire est une tâche toujours un peu répétitive : les champs ont souvent les mêmes propriétés, le même accompagnement (message d’erreur, explication, ...) et la même structure HTML. Ce plugin est un outil pour les développeurs (...)

Ça spipe par là