Présentation de l’addin Jauge Liquide #
Cet addin apporte une image animée comme s’il contenait un liquide et n’affichant seulement des valeurs entre 0 et 100.
Utilisation #
Cet addin est un composant d3.js qui contient une jauge affichant un pourcentage. Le composant est associé obligatoirement associé à une Datasource dont la valeur est unique. Le champ peut être un champ issu de la requête ou bien un champ calculé issu de la Datasource.
Propriétés simples #
Nom / Infobulle / Visibilité / Rafraîchissement auto #
Pour plus d'informations voir Propriétés simples
Edition Web : [nom du composant] #
Propriétés #
Liaison de données #
Attribut #
Champ de la datasource qui est affiché.
Animation #
Il s’agit de tous les éléments permettant de configurer l’animation de remplissage de la jauge et des vagues :
Vitesse de remplissage #
Vitesse de remplissage de la jauge en ms : 1000 (défaut).
Vitesse des vagues #
Vitesse de l'animation des vagues (ms) : 18000 (défaut).
Activer l’animation de la vague #
Activer l'animation : coché (défaut).
Apparence du composant #
Il s’agit de tous les éléments permettant de configurer la partie statique de la jauge :
Nombre de vagues #
Indique le nombre de vagues : 1 (défaut).
Epaisseur du cercle #
Indique l'épaisseur du cercle contenant le liquide : 5 (défaut).
Espace entre le liquide et le conteneur #
espace entre le cercle conteneur et le liquide : 5 (défaut).
Couleur du cercle #
Couleur du cercle.
Taille de la vague #
Taille de la vague : 5 (défaut).
Couleur de la vague #
Couleur de la vague.
Position du texte #
position du texte en pourcentage : 50 (défaut).
Pourcentage d’occupation du texte dans la jauge #
Taille du texte : 100 (défaut).
Afficher le pourcentage #
Affiche le pourcentage : coché (défaut).
Police #
Police : inherit (défaut).
Couleur du texte au dessus de la vague #
couleur du texte lorsqu'il est par dessus la partie vide de la jauge.
Couleur du texte sous la vague #
Couleur du texte lorsqu'il est en dessous la partie remplit de la jauge.
Exemple #
L’exemple présenté est créé comme suit :
Requête #
select 55 as Pourcentage
Configuration composant #
On sélectionne le champ à restituer dans la jauge liquide. Dans notre exemple, la colonne s’appelle bien ‘Pourcentage’.
On modifie la durée : 1000 à 10000 et Vitesse : 18000 à 1000. Avec cette modifcation, à l’affichage on constate que le composant se remplit doucement et que la vague est plus rapide.