Sommaire #
Ce graphique représente la répartition par tranche d’âge de la population française en 2020.
Présentation de l’addin Jauge Pyramide #
Cet addin représente deux histogrammes côte à côte.
On le trouve souvent utilisé pour représenter une pyramide des âges.
Ce composant peut être cible de lien (filtre ou paramètre) : il se rafraîchit lorsque sa source de données ou son filtre sont modifiés.
Ce composant peut être source de lien : il a alors la capacité de rafraîchir ses composants cibles lorsque l’utilisateur clique sur une série.
Il est aussi capable de déclencher un lien hypertexte lors de la sélection d’un élément.
L’axe des catégories peut être affiché au choix :
- au centre
- à droite
- à gauche
- à droite et à gauche
Enfin, un double-clic sur une valeur ou une catégorie déclenche le tri des données du composant.
Note : cet addin fonctionne avec les navigateurs récents (Chrome, Firefox, Edge, Safari, …) mais présente certaines incompatibilités avec Internet Explorer.
Utilisation #
Cet addin est réalisé à partir de différents composants amChart4.
Paramétrage #
Il y a 3 menus spécifiques de paramétrage pour l’addin Jauge.
Liaison de données #
Il s’agit de tous les éléments permettant de lier le fonctionnement de la jauge à la source de données :
| Item à paramétrer | Description | Valeur par défaut | |
|---|---|---|---|
| Champ contenant les catégories | Obligatoire | Champ de la datasource contenant le nom des catégories | |
| Champ contenant les données de la partie gauche | Obligatoire | Champ de la datasource contenant les valeurs à afficher dans la partie gauche du composant | |
| Champ contenant les données de la partie droite | Obligatoire | Champ de la datasource contenant les valeurs à afficher dans la partie droite du composant | |
| Champ de tri des catégories | Facultatif | Champ de la datasource permettant d’effectuer le tri des catégories.Si il n’est pas renseigné, le tri en double-cliquant sur l’axe ne fonctionne pas. | |
| Champ contenant la description de la partie gauche | Facultatif | Champ de la datasource contenant la description affichée lors du survol des données.Si il n’est pas renseigné, le format par défaut est utilisé | |
| Champ contenant la description de la partie gauche | Facultatif | Champ de la datasource contenant la description affichée lors du survol des données.Si il n’est pas renseigné, le format par défaut est utilisé | |
| Champ contenant l’URL cible | Facultatif | Champ de la datasource contenant le lien hypertexte à déclencher lors du click sur une valeur | |
| Champ contenant le cible du lien hypertexte | Facultatif | Champ de la datasource contenant la cible du lien (_self, _blank, _top, _parent ou id d’une iframe) | _self |
| Champ de référence pour les liens sortants | Facultatif | Identifie le champ qui se passé aux les liens sortants | |
| Rafraîchissement automatique | Obligatoire | Indique si un clic sur une série doit rafraîchir les composants cibles | false |
Note : le format par défaut au survol des données est le suivant : <NOM DU CHAMP CATEGORIE>:<VALEUR DU CHAMP CATEGORIE>;<NOM DU CHAMP DONNEE>:< VALEUR DU CHAMP DONNEE>
Animation #
Il s’agit de tous les éléments permettant de configurer le l’animation de la jauge :
| Item à paramétrer | Description | Valeur par défaut |
|---|---|---|
| Inverser l’animation de l’axe des catégories | permet de changer le sens de l’animation à l’affichage | true |
| Inverser l’animation de l’axe gauche | true | |
| Inverser l’animation de l’axe droit | true |
Apparence composant #
Il s’agit de tous les éléments permettant de configurer l’apparence de la jauge :
| Item à paramétrer | Description | Valeur par défaut |
|---|---|---|
| Couleur texte de la catégorie | Définit la couleur du texte de la catégorie (l’axe) | dépendant du thème |
| Couleur de fond de l’axe gauche | Couleur de fond de la partie gauche de la jauge | dépendant du thème |
| Couleur de fond de l’axe droit | Couleur de fond de la partie droite de la jauge | dépendant du thème |
| Couleur du texte de l’axe gauche | Couleur de texte de la partie gauche de la jauge | dépendant du thème |
| Couleur du texte de l’axe droit | Couleur de texte de la partie droite de la jauge | dépendant du thème |
| Couleur du texte de la sélection de catégorie | Couleur de texte lors de la sélection d’une catégorie | dépendant du thème |
| Couleur de fond de la sélection de catégorie | Couleur de fond lors de la sélection d’une catégorie | dépendant du thème |
| Couleur du trait de la sélection de catégorie | Couleur du trait entourant la sélection d’une catégorie | dépendant du thème |
| Couleur du contour des lignes | Couleur des traits entourant les valeurs (uniquement si « Epaisseur du contour des lignes » > 0) | dépendant du thème |
| Afficher l’axe à gauche | L’axe gauche est affiché (sauf si « Afficher l’axe au centre » est sélectionné) | faux |
| Afficher l’axe à droite | L’axe droit est affiché (sauf si « Afficher l’axe au centre » est sélectionné) | faux |
| Afficher l’axe au centre | L’axe central est affiché (et les axes droit et gauche ne le sont plus) | faux |
| Masquer les valeurs de l’axe gauche | Ne pas afficher les valeurs sur la partie gauche | faux |
| Masquer les valeurs de l’axe droit | Ne pas afficher les valeurs sur la partie droite | 0 |
| Espace separant les deux cotés de la pyramide | Marge entre les deux parties de la pyramide (en pixels) | 0 |
| Position du libellé de l’axe gauche (pourcentage) | Aligne le texte au centre (100) ou à l’extrémité (0) de la valeur | 99 |
| Position du libellé de l’axe droit (pourcentage) | 99 | |
| Epaisseur du contour des lignes | Épaisseur du contour des lignes (en pixel) entourant les valeurs | 0 |
| Arrondi de fin de ligne | Taille de l’arrondi en fin d’histogramme | 5 |
| Taille du trait entourant la sélection | 1 | |
| Taille du texte du libelle de l’axe des catégories | 15 | |
| Taille du texte du libelle de l’axe gauche | 15 | |
| Taille du texte du libelle de l’axe droit | 15 |
Note : si une couleur n’est pas spécifiée, c’est la couleur définie dans le thème qui sera utilisée.
Le fichier du thème qui contient les définitions de couleurs est : \web\resource\themes\NOM_DU_THEME\BiBOARD\PyramidColor.xml