Este objeto es la superclase de los widgets de indicador analógico y gráfico de barras. Este objeto proporciona toda la funcionalidad común entre los dos widgets, por ejemplo, el dibujo de la superficie base, el manejo de la mayoría de sucesos de ratón, etc. Están disponibles las siguientes variables y funciones comunes:
Variables del objeto | ||
---|---|---|
Número | gaugeWidth | El ancho de la superficie que se crea en la página. Se expresa en píxeles. |
Número | gaugeHeight | La altura de la superficie que se crea en la página. Se expresa en píxeles. |
Serie|Objeto | gaugeBackground | El color que se aplica al fondo del dispositivo indicador. Normalmente, se trata de un color de estilo CSS como #e0e0e0. Utilice este color para el objeto de relleno. Consulte el ejemplo. |
Número | gaugeMin | El valor mínimo que se muestra en el dispositivo indicador. |
Número | gaugeMax | El valor máximo que se muestra en el dispositivo indicador. |
Serie | image | Un URL que se utiliza como fondo del dispositivo indicador. |
Número | imageX | La posición x donde se coloca la imagen. El valor por omisión es 0, que especifica la posición de la esquina inferior izquierda. |
Número | imageY | La posición y donde se coloca la imagen. El valor por omisión es 0, que especifica la posición de la esquina inferior izquierda. |
Número | imageWidth | El ancho de la imagen indicada previamente. Si se utiliza una imagen, debe especificar este valor para que se visualice la imagen. |
Número | imageHeight | La altura de la imagen indicada previamente. Si se utiliza una imagen, debe especificar este valor para que se visualice la imagen. |
Booleano | imageOverlay | Determina si la imagen citada previamente es un preformato en lugar de un fondo. |
Número | useRangeStyles | Determina si se deben utilizar estilos CSS para indicar los colores del rango. |
Booleano | hideValues | Determina si se deben ocultar los recuadros de texto debajo del dispositivo indicador y mostrar los valores de los indicadores. |
De forma declarativa, en la marcación, esta variable sólo puede establecerse como una serie, normalmente una serie de color de estilo CSS como, por ejemplo, gris o #e0e0e0. No obstante, en JavaScript, la variable gaugeBackground puede establecerse en un objeto de relleno, para cumplir la definición de objeto de relleno dojox.gfx. El objeto de relleno lineal espera las siguientes condiciones:
{ type: "linear", x1: 0, // posición x para iniciar el primer color y1: 0, // posición y para iniciar el primer color x2: 100, // posición x para finalizar el segundo color y2: 100, // posición y para finalizar el segundo color colors: [{offset: 0, color: "black"}, // el primer color {offset: 1, color: "white"}] // el segundo color }Para establecer un gradiente de gris a blanco que vaya del final del dispositivo indicador al principio, puede especificar el siguiente código:
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;
El valor por omisión de esta variable es 0, lo que indica que se utilizan los colores de rango incorporados. No obstante, si se establece en un valor mayor que 0, se utiliza para el estilo de los rangos dicho número de clases CSS, ibmGaugeRange1, ibmGaugeRange2, etc. Esta característica no funciona en Internet Explorer. La clase CSS tiene propiedades como en el siguiente ejemplo:
.ibmGaugeRange1 { fill: #808080 ; stroke: #808080 ; }Como se puede ver, son estilos SVG (Scalable Vector Graphics), no estilos HTML. Los atributos como el color de fondo no tienen ningún efecto.
Por omisión, la variable hideValues se establece en false, lo que significa que para cada indicador añadido al dispositivo indicador , aparece un recuadro de texto debajo de la superficie del indicador que muestra el valor del indicador como un valor de texto. Esta característica se proporciona a efectos de accesibilidad y si se establece esta variable en true, el dispositivo indicador será *inaccesible*. Esta es una importante consideración a tener en cuenta, ya que algunos lectores no podrán acceder al valor de los dispositivos indicadores si estos recuadros de texto están inhabilitados.
Funciones del objeto | |
---|---|
void | addRange(Object range) Añade un rango a este widget de dispositivo indicador. |
void | addRanges(Array ranges) Añade una colección de objetos de rango a este dispositivo indicador. |
void | moveIndicatorToFront(Object indicator) Mueve el indicador dado al principio del dispositivo indicador. |
void | drawText(String txt, Number x, Number y, String align, String vAlign) Dibuja texto en el dispositivo indicador. |
void | removeText(String t) Elimina el texto dado del dispositivo indicador. |
void | updateTooltip(String text) Actualiza la ayuda contextual del dispositivo indicador con el texto dado. |
void | handleMouseOver(Object event) Soporte de ratón. |
void | handleMouseOut(Object event) Soporte de ratón. |
void | handleMouseDown(Object event) Soporte de ratón. |
void | handleMouseUp(Object event) Soporte de ratón. |
void | handleMouseMove(Object event) Soporte de ratón. |
Detalles de las funciones |
---|
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!");
Los widgets siguientes (Rango, Gradiente, GradientColor e Indicador) se utilizan principalmente para crear un dispositivo indicador de forma declarativa, en marcación, o en lugar de utilizar un objeto anónimo para las otras funciones de dispositivo indicador.
Variables del objeto | ||
---|---|---|
Número | low | El valor bajo o mínimo de este rango. |
Número | high | El valor alto o máximo de este rango. |
Serie | hover | El texto que se coloca en la ayuda contextual cuando se mueve el cursor del ratón sobre este rango. |
Serie|Objeto | color | El color de este rango. También puede ser un objeto ibm_gauge.widget.Gradient. |
Número | size | Para un dispositivo indicador circular como, por ejemplo, AnalogGauge, este valor indica el tamaño del arco. |
Variables del objeto | ||
---|---|---|
Serie | type | El tipo de gradiente. Consulte dojox.gfx.* para ver los tipos disponibles. |
Número | x1 | La coordenada x donde se utiliza más el primer color. |
Número | x2 | La coordenada x donde se utiliza más el segundo color. |
Número | y1 | La coordenada y donde se utiliza más el primer color. |
Número | y2 | La coordenada y donde se utiliza más el segundo color. |
Matriz | colors | Los dos colores que se utilizan para este gradiente. Estos colores pueden ser un objeto ibm_gauge.widget.GradientColor o un objeto anónimo con propiedades comparables. |
Funciones del objeto | |
---|---|
Objeto | getFillObject() Obtiene este widget como un objeto de relleno anónimo. |
Detalles de las funciones |
---|
Variables del objeto | ||
---|---|---|
Número | offset | El desplazamiento de este color, que puede ser 0 o 1. |
Serie | color | El color que se utiliza. Normalmente es un color CSS, por ejemplo, blanco o #000000. |
Funciones del objeto | |
---|---|
Objeto | getColorObject() Obtiene este widget como un objeto de color anónimo. |
Detalles de las funciones |
---|
Variables del objeto | ||
---|---|---|
Número | value | El valor en el dispositivo indicador que representa este indicador. |
Serie | type | El tipo de indicador. Algunos ejemplos son line, arrow y bar. Los valores posibles dependen del tipo de dispositivo indicador. |
Serie | color | El color de este indicador. Normalmente es un color de estilo CSS. |
Serie | label | La etiqueta de este indicador. |
Número | length | La longitud del indicador. |
Número | width | El ancho o el grosor del indicador. |
Número | offset | El desplazamiento del indicador. |
Serie | hover | El texto que se especifica en la ayuda contextual cuando se mueve el cursor del ratón sobre este indicador. |
Serie|Función | onDragMove | La función que se invoca cuando el indicador se mueve con una acción de arrastrar. Este valor puede ser un nombre de función o la propia función. |
El widget de dispositivo indicador analógico proporciona un dispositivo indicador gráfico y circular para indicar valores numéricos, de la misma forma que un velocímetro o un indicador de presión. Este dispositivo indicador puede tener valores de ángulo inicial y final, que proporcionan dispositivos indicadores en distintas formas circulares como, por ejemplo, círculos completos, semicírculos y arcos. El dispositivo indicador analógico amplía la superclase _Gauge, y hereda todas sus variables, propiedades y funciones.
Variables del objeto | ||
---|---|---|
Número | gaugeWidth | Altera temporalmente la propiedad de _Gauge del mismo nombre. Esta variable indica el ancho del dispositivo indicador y establece el valor por omisión en 300 píxeles. |
Número | gaugeHeight | Altera temporalmente la propiedad de _Gauge del mismo nombre. Esta variable indica la altura del dispositivo indicador y establece el valor por omisión en 200 píxeles. |
Número | cx | La coordenada x del centro del dispositivo indicador, con el área de superficie prescrita. El valor por omisión es gaugeWidth/2. |
Número | cy | La coordenada y del centro del dispositivo indicador, con el área de superficie prescrita. El valor por omisión es gaugeHeight/2. |
Número | radius | El radio del dispositivo indicador. El valor por omisión es el menor de los valores cx-25 y cy-25. |
Número | startAngle | Indica el ángulo, en grados, donde empieza el dispositivo indicador. El valor por omisión es -90. |
Número | endAngle | Indica el ángulo, en grados, donde finaliza el dispositivo indicador. El valor por omisión es -90. |
Funciones del objeto | |
---|---|
void | addIndicator(Object indicator) Añade el indicador dado a este dispositivo indicador. |
Número | getAngle(Number value) Dado un valor numérico indicado en el dispositivo indicador, obtiene el ángulo correspondiente a dicho valor. |
Número | getValueForAngle(Number angle) Dado un ángulo, obtiene el valor correspondiente al ángulo. |
Número | getRadians(Number angle) Convierte de grados a radianes. |
Número | getDegrees(Number radians) Convierte de radianes a grados. |
void | draw() Dibuja o redibuja el dispositivo indicador. |
void | drawRange(Object range) Dibuja el rango dado en este dispositivo indicador. |
void | drawIndicator(Object indicator) Dibuja el indicador dado en este dispositivo indicador. |
void | moveIndicator(Object indicator) Mueve el indicador dado en este dispositivo indicador. |
Objeto | getRangeUnderMouse(Object event) Determina el rango sobre el que se sitúa el cursor del ratón actualmente. |
Detalles de las funciones |
---|
El widget de gráfico de barras proporciona una vista gráfica de datos numéricos en forma de un gráfico de barras horizontal de una sola columna. El gráfico de barras puede tener un número cualquiera de barras horizontales en la misma columna, indicadores de destino y marcas de escala. El widget de gráfico de barras amplía la superclase _Gauge, y hereda todas sus variables, propiedades y funciones.
Variables del objeto | ||
---|---|---|
Número | gaugeWidth | Altera temporalmente la propiedad de _Gauge del mismo nombre. Esta variable indica el ancho del dispositivo indicador y establece el valor por omisión en 250 píxeles. |
Número | gaugeHeight | Altera temporalmente la propiedad de _Gauge del mismo nombre. Esta variable indica la altura del dispositivo indicador y establece el valor por omisión en 35 píxeles. |
Número | dataX | La coordenada x, en píxeles, donde se inicia el área de datos. El valor por omisión es 5. |
Número | dataY | La coordenada y donde debe empezar el área de datos, en píxeles. El valor por omisión es 5. |
Número | dataWidth | El ancho, en píxeles, del área de datos. El valor por omisión es gaugeWidth-10. |
Número | dataHeight | La altura, en píxeles, del área de datos. El valor por omisión es gaugeHeight-10. |
Funciones del objeto | |
---|---|
void | addIndicator(Object indicator) Añade el indicador dado a este gráfico de barras. |
Número | getPosition(Number value) Obtiene la posición de coordenadas que representa un determinado valor. |
Número | getValueForPosition(Number position) Obtiene el valor de una determinada posición de coordenadas. |
void | draw() Dibuja o redibuja el gráfico de barras. |
void | drawRange(Object range) Dibuja el rango dado en este gráfico de barras. |
void | drawIndicator(Object indicator) Dibuja el indicador dado en este gráfico de barras. |
void | moveIndicator(Object indicator) Mueve el indicador dado en este gráfico de barras. |
void | resizeIndicator(Object indicator) Cambia el tamaño del indicador dado en este gráfico de barras. |
Objeto | getRangeUnderMouse(Object event) Determina el rango sobre el que se sitúa el cursor del ratón. |
Detalles de las funciones |
---|