Referencias de los widgets de IBM Gauge


Superclase _Gauge

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.

gaugeBackground

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;


useRangeStyles

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.


hideValues

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
addRange

addRanges

moveIndicatorToFront

drawText

removeText

updateTooltip

handleMouseOver

handleMouseOut

handleMouseDown

handleMouseUp

handleMouseMove

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.

Widget de rango
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.

Widget de gradiente
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
getFillObject

Widget de gradiente de color
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
getcolorObject

Widget de indicador
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.

Widget de dispositivo indicador analógico

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
addIndicator

getAngle

getValueForAngle

getRadians

getDegrees

draw

drawRange

drawIndicator

moveIndicator

getRangeUnderMouse

Widget de gráfico de barras

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
addIndicator

getPosition

getValueForPosition

draw

drawRange

drawIndicator

moveIndicator

resizeIndicator

getRangeUnderMouse