Références pour les widgets Gauge d'IBM


Superclasse_Gauge

Cet objet est la super classe des widgets de jauge analogique et diagramme à barres. Il fournit toutes les fonctionnalités communes à ces deux widgets avec des fonctionnalités permettant d'écrire sur la surface de base, de contrôler tous les événements effectués avec la souris, etc. Les fonctions et les variables communes suivantes sont disponibles :

Variables d'objets
Nombre gaugeWidth Largeur de la surface à créer sur la page. Mesurée en pixels.
Nombre gaugeHeight Hauteur de la surface à créer sur la page. Mesurée en pixels.
String|Object gaugeBackground Couleur à appliquer à l'arrière-plan de la jauge. Généralement de style CSS tel que #e0e0e0. Utilisez cette couleur pour l'objet de remplissage. Voir l'exemple.
Nombre gaugeMin Valeur minimale à afficher sur la jauge.
Nombre gaugeMax Valeur maximale à afficher sur la jauge.
String (chaîne) image Adresse URL à utiliser comme arrière-plan de la jauge.
Nombre imageX Emplacement x de l'image. La valeur par défaut est 0 indiquant le coin inférieur gauche.
Nombre imageY Emplacement y de l'image. La valeur par défaut est 0 indiquant le coin inférieur gauche.
Nombre imageWidth Largeur de l'image indiquée précédemment. Vous devez spécifier cette valeur pour l'image à afficher si une image est utilisée.
Nombre imageHeight Hauteur de l'image indiquée précédemment. Vous devez spécifier cette valeur pour l'image à afficher si une image est utilisée.
Booléen imageOverlay Si l'image mentionnée ci-dessus est une image de superposition plutôt qu'un arrière-plan.
Nombre useRangeStyles Si des couleurs de style CSS sont à utiliser pour indiquer les couleurs d'intervalle.
Booléen hideValues Si les zones de texte situées sous la jauge doivent être masquées et afficher la valeur des indicateurs.

gaugeBackground

De façon déclarative, dans le marquage, cette variable ne peut être définie que comme une chaîne, qui est généralement une chaîne de couleurs de style CSS telle que la couleur grise ou #e0e0e0. Cependant, dans JavaScript, la variable gaugeBackground peut être définie comme un objet de remplissage permettant de définir l'objet de remplissage dojox.gfx. L'objet de remplissage linéaire requiert les conditions suivantes :

{
type: "linear", 
x1: 0, // x-position to start the first color
y1: 0, // y-position to start the first color
x2: 100, // x-position to end the second color
y2: 100, // x-position to end the second color
colors: [{offset: 0, color: "black"}, // the first color
	 {offset: 1, color: "white"}] // the second color
}
Il se peut que vous deviez entrer le code ci-après pour définir un gradient de couleur gris à blanc du début à la fin d'une jauge :
var gauge = dijit.byId("testGauge");
var fill = new Object();
fill.type = "linear";
fill.x1 = 0;
fill.x2 = 0;
fill.y2 = 0;
fill.y1 = gauge.gaugeHeight;
fill.colors = [{offset: 0, color: "#ECECEC"}, {offset: 1, color: "white"}];
gauge.gaugeBackground = fill;


useRangeStyles

La valeur par défaut de cette variable est 0 indiquant que les couleurs d'intervalle intégrées sont utilisées. Néanmoins, si cette variable possède une valeur supérieure à 0, ce nombre de classes CSS (ibmGaugeRange1, ibmGaugeRange2, etc.) est alors utilisé pour définir le type des intervalles. Cette fonction n'est pas valable dans Internet Explorer. La classe CSS possède des propriétés comme l'exemple suivant l'illustre :

.ibmGaugeRange1 {
	fill: #808080 ;
	stroke: #808080 ;
}
Comme décrit ci-dessus, elles sont de styles SVG (Scalable Vector Graphics) et non HTML. Des attributs tels qu'une couleur d'arrière-plan n'ont aucun effet.


hideValues

Par défaut, la variable hideValues est définie à false. Cela veut dire que pour chaque indicateur ajouté à la jauge, une zone de texte située sous la surface de la jauge s'affiche indiquant la valeur de cet indicateur comme une valeur textuelle. Cette fonction a été conçue pour des raisons d'accessibilité. Ce qui implique que si cette variable est définie à true, la jauge devient *inaccessible*. Cette remarque ne doit pas être prise à la légère, étant donné que certains lecteurs pourraient ne pas accéder aux valeurs des jauges si ces zones de texte sont désactivées.


Fonctions d'objets
void addRange(Object range)
Permet d'ajouter un intervalle au widget Gauge.
void addRanges(Array ranges)
Permet d'ajouter un ensemble d'objets d'intervalle à la jauge.
void moveIndicatorToFront(Object indicator)
Permet de déplacer l'indicateur donné vers le début de la jauge.
void drawText(String txt, Number x, Number y, String align, String vAlign)
Permet d'écrire sur la jauge.
void removeText(String t)
Permet de supprimer le texte donné à partir de la jauge.
void updateTooltip(String text)
Permet de mettre à jour l'infobulle de la jauge avec le texte donné.
void handleMouseOver(Object event)
Permet de contrôler la souris.
void handleMouseOut(Object event)
Permet de contrôler la souris.
void handleMouseDown(Object event)
Permet de contrôler la souris.
void handleMouseUp(Object event)
Permet de contrôler la souris.
void handleMouseMove(Object event)
Permet de contrôler la souris.

Détails des fonctions
addRange

addRanges

moveIndicatorToFront

drawText

removeText

updateTooltip

handleMouseOver

handleMouseOut

handleMouseDown

handleMouseUp

handleMouseMove

Les widgets Range, Gradient, GradientColor et Indicator sont utilisés en premier lieu pour créer une jauge de façon déclarative, dans le marquage ou au lieu d'utiliser un objet anonyme pour les autres fonctions de la jauge.

Widget Intervalle
Variables d'objets
Nombre low Valeur inférieure ou minimale de l'intervalle.
Nombre high Valeur supérieure ou maximale de l'intervalle.
String (chaîne) hover Texte à saisir dans l'infobulle lorsque la souris est déplacée sur l'intervalle.
String|Object color Couleur de l'intervalle. Peut être également un objet ibm_gauge.widget.Gradient.
Nombre size Pour une jauge circulaire, telle qu'une AnalogGauge, cette propriété indique la taille de l'arc.

Widget Gradient
Variables d'objets
String (chaîne) type Type de gradient. Voir dojox.gfx.* pour consulter les types disponibles.
Nombre x1 Coordonnée x de l'emplacement où la première couleur est la plus utilisée.
Nombre x2 Coordonnée x de l'emplacement où la seconde couleur est la plus utilisée.
Nombre y1 Coordonnée y de l'emplacement où la première couleur est la plus utilisée.
Nombre y2 Coordonnée y de l'emplacement où la seconde couleur est la plus utilisée.
Array colors Les deux couleurs à utiliser pour le gradient. Généralement, ces couleurs sont soit un objet ibm_gauge.widget.GradientColor, soit un objet anonyme avec des propriétés comparables.

Fonctions d'objets
Objet getFillObject()
Permet d'obtenir le widget en tant qu'objet de remplissage anonyme.

Détails des fonctions
getFillObject

Widget Gradient color
Variables d'objets
Nombre offset Décalage de la couleur : 0 ou 1.
String (chaîne) color Couleur à utiliser. Généralement une couleur de style CSS telle que le blanc ou #000000.

Fonctions d'objets
Objet getColorObject()
Permet d'obtenir le widget en tant qu'objet de couleur anonyme.

Détails des fonctions
getcolorObject

Widget Indicateur
Variables d'objets
Nombre valeur Valeur représentée par l'indicateur sur la jauge.
String (chaîne) type Type d'indicateur. Les exemples probables incluent les formes suivantes : trait flèche et barre. Les valeurs possibles dépendent du type de jauge.
String (chaîne) color Couleur de l'indicateur. Généralement une couleur de style CSS.
String (chaîne) label Intitulé de l'indicateur.
Nombre length Longueur de l'indicateur.
Nombre width Largeur ou épaisseur de l'indicateur.
Nombre offset Décalage de l'indicateur.
String (chaîne) hover Texte à entrer dans l'infobulle lorsque le curseur est déplacé sur l'indicateur.
String|Function onDragMove Fonction à appeler lorsque l'indicateur est déplacé avec une action glisser. Cette valeur peut être un nom de fonction ou la fonction elle-même.

Widget Jauge analogique

Le widget de jauge analogique fournit une jauge graphique et circulaire pour indiquer les valeurs numériques qui correspond d'avantage à un indicateur de vitesse ou à une jauge à pression. Cette jauge peut disposer de n'importe quelle valeur d'angle de fin et de début. Cela permet de fournir des jauges avec un nombre quelconque de formes circulaires, incluant des cercles complets, des demi-cercles et des arcs de cercle. La jauge analogique développe la superclasse _Gauge, héritant de toutes ses variables, propriétés et fonctions.

Variables d'objets
Nombre gaugeWidth Permet de remplacer la propriété_Gauge du même nom. Cette variable indique la largeur de la jauge et définit la valeur par défaut à 300 pixels.
Nombre gaugeHeight Permet de remplacer la propriété_Gauge du même nom. Cette variable indique la hauteur de la jauge et définit la valeur par défaut à 200 pixels.
Nombre cx Coordonnée x du centre de la jauge dans la zone de surface prescrite. La valeur par défaut est gaugeWidth/2.
Nombre cy Coordonnée y du centre de la jauge dans la zone de surface prescrite. La valeur par défaut est gaugeHeight/2.
Nombre radius Rayon de la jauge. La valeur par défaut est correspond à la plus basse valeurs comprises entre cx-25 et cy-25.
Nombre startAngle Indique en degrés l'angle de début de la jauge. La valeur par défaut est -90.
Nombre endAngle Indique en degrés l'angle de fin de la jauge. La valeur par défaut est -90.

Fonctions d'objets
void addIndicator(Object indicator)
Permet d'ajouter l'indicateur donné à cette jauge.
Nombre getAngle(Number value)
Une valeur numérique étant indiquée sur la jauge, permet d'obtenir l'angle correspondant à cette valeur.
Nombre getValueForAngle(Number angle)
Un angle étant fourni, permet d'obtenir la valeur correspondante à l'angle.
Nombre getRadians(Number angle)
Permet de convertir les degrés en radians.
Nombre getDegrees(Number radians)
Permet de convertir les radians en degrés.
void draw()
Permet d'écrire et de réécrire sur la jauge.
void drawRange(Object range)
Permet d'écrire l'intervalle donné sur la jauge.
void drawIndicator(Object indicator)
Permet d'écrire l'indicateur donné sur la jauge.
void moveIndicator(Object indicator)
Permet de déplacer l'indicateur donné sur la jauge.
Objet getRangeUnderMouse(Object event)
Permet de déterminer l'intervalle en cours où le curseur passe.

Détails des fonctions
addIndicator

getAngle

getValueForAngle

getRadians

getDegrees

draw

drawRange

drawIndicator

moveIndicator

getRangeUnderMouse

Widget Diagramme à barres

Le widget de diagramme à barres fournit un affichage graphique de données numériques sous la forme d'un diagramme à barres horizontal à colonne unique. Le diagramme à barres peut disposer de plusieurs barres horizontales sur la même colonne, des indicateurs cible et des marques de graduation. Le widget de diagramme à barres développe la superclasse _Gauge, héritant de toutes ses variables, propriétés et fonctions.

Variables d'objets
Nombre gaugeWidth Permet de remplacer la propriété_Gauge du même nom. Cette variable indique la largeur de la jauge et définit la valeur par défaut à 250 pixels.
Nombre gaugeHeight Permet de remplacer la propriété_Gauge du même nom. Cette variable indique la hauteur de la jauge et définit la valeur par défaut à 35 pixels.
Nombre dataX Coordonnée x, en pixels, où la zone de données commence. La valeur par défaut est 5.
Nombre dataY Coordonnée y de l'emplacement où la zone de données devrait commencer, en pixels. La valeur par défaut est 5.
Nombre dataWidth Largeur, en pixels, de la zone de données. La valeur par défaut est gaugeWidth-10.
Nombre dataHeight Hauteur, en pixels, de la zone de données. La valeur par défaut est gaugeHeight-10.

Fonctions d'objets
void addIndicator(Object indicator)
Permet d'ajouter l'indicateur donné au diagramme à barres.
Nombre getPosition(Number value)
Permet d'obtenir la position de la coordonnée représentant une valeur donnée.
Nombre getValueForPosition(Number position)
Permet d'obtenir la valeur de la position de coordonnée donnée.
void draw()
Permet de dessiner et de redessiner le diagramme à barres.
void drawRange(Object range)
Permet d'écrire l'intervalle donné sur ce diagramme à barres.
void drawIndicator(Object indicator)
Permet d'écrire l'indicateur donné sur le diagramme à barres.
void moveIndicator(Object indicator)
Permet de déplacer l'indicateur donné sur le diagramme à barres.
void resizeIndicator(Object indicator)
Permet de redimensionner l'indicateur donné sur le diagramme à barres.
Objet getRangeUnderMouse(Object event)
Permet de déterminer l'intervalle où le curseur passe.

Détails des fonctions
addIndicator

getPosition

getValueForPosition

draw

drawRange

drawIndicator

moveIndicator

resizeIndicator

getRangeUnderMouse