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. |
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;
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.
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 |
---|
var gauge = new ibm_gauge.widget.AnalogGauge(); gauge.addRange({low:10, high:20, hover:'10 - 20'});
var gauge = new ibm_gauge.widget.AnalogGauge({}); gauge.addRanges([{low:10, high:20, hover:'10 - 20'},{low:20, high:30, hover:'20 - 30'}]);
var gauge = new ibm_gauge.widget.AnalogGauge({}); gauge.drawText("Sample text", 100, 50, 'right');
var gauge = new ibm_gauge.widget.AnalogGauge({}); gauge.drawText("Sample text", 100, 50, 'right'); gauge.removeText("Sample text");
var gauge = new ibm_gauge.widget.AnalogGauge({}); gauge.updateTooltip("Text to put in tooltip!");
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.
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. |
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 |
---|
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 |
---|
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. |
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 |
---|
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 |
---|