Referências para Widgets de Medidor IBM


Superclasse _Gauge

Esse objeto é a superclasse dos widgets de medidor analógico e gráfico de barras. Ele fornece toda a funcionalidade comum entre esses dois widgets, que inclui desenhar a superfície base, manipular a maioria dos eventos do mouse, etc. As seguintes variáveis e funções comuns estão disponíveis:

Variáveis de Objetos
Número gaugeWidth A largura da superfície a ser criada na página. Expressa em pixels.
Número gaugeHeight A altura da superfície a ser criada na página. Expressa em pixels.
String|Object gaugeBackground A cor a ser aplicada ao plano de fundo do medidor. Geralmente, uma cor de estilo CSS, tal como #e0e0e0. Utilize essa cor para o objeto de preenchimento. Consulte o exemplo.
Número gaugeMin O valor mínimo a ser exibido no medidor.
Número gaugeMax O valor máximo a ser exibido no medidor.
String image Uma URL a ser utilizada como o plano de fundo para o medidor.
Número imageX A posição x para colocar a imagem. O valor padrão é 0, que especifica a posição do canto inferior esquerdo.
Número imageY A posição y para colocar a imagem. O valor padrão é 0, que especifica a posição do canto inferior esquerdo.
Número imageWidth A largura da imagem indicada anteriormente. Se uma imagem for utilizada, você deverá especificar esse valor para a imagem a ser exibida.
Número imageHeight A altura da imagem indicada anteriormente. Se uma imagem for utilizada, você deverá especificar esse valor para a imagem a ser exibida.
Booleano imageOverlay Indica se a imagem mencionada anteriormente é uma sobreposição, em vez de um plano de fundo.
Número useRangeStyles Indica se estilos CSS devem ser utilizados para indicar as cores do intervalo.
Booleano hideValues Indica se deve-se ocultar as caixas de texto abaixo do medidor e mostrar o valor dos indicadores.

gaugeBackground

Declarativamente, em marcação, essa variável pode ser configurada apenas como uma cadeia, que é geralmente uma cadeia de cores no estilo CSS, como cinza ou #e0e0e0. Entretanto, em JavaScript, a variável gaugeBackground pode ser configurada para um objeto de preenchimento, preenchendo a definição de objeto de preenchimento dojox.gfx. O objeto de preenchimento linear espera as seguintes condições:

{
type: "linear", 
x1: 0, // posição x para iniciar a primeira cor
y1: 0, // posição y para iniciar a primeira cor
x2: 100, // posição x para encerrar a segunda cor
y2: 100, // posição x para encerrar a segunda cor
colors: [{offset: 0, color: "preto"}, // a primeira cor
	 {offset: 1, color: "branco"}] // a segunda cor
}
Para configurar um matiz de cinza para branco, do final de um medidor para o início, você pode digitar o seguinte 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: "branco"}];
gauge.gaugeBackground = fill;


useRangeStyles

Esse valor padrão de variável é 0, indicando que são utilizadas as cores do intervalo integrado. Entretanto, se configurar para um número maior que 0, esse número de classes CSS, ibmGaugeRange1, ibmGaugeRange2 e etc, será utilizado para estilizar os intervalos. Esse recurso não funciona no Internet Explorer. A classe CSS possui propriedades como no exemplo a seguir:

.ibmGaugeRange1 {
	fill: #808080 ;
	stroke: #808080 ;
}
Conforme mostrados, estes são estilos SVG (Scalable Vector Graphics), não estilos HTML. Atributos como cor do plano de fundo não têm efeito.


hideValues

Por padrão, a variável hideValues está configurada como false, o que significa que, para cada indicador incluído no medidor, é exibida uma caixa de texto abaixo da superfície do medidor que mostra o valor desse indicador como um valor de texto. Esse recurso destina-se a propósitos de acessibilidade e a configuração dessa variável como true torna esse medidor *inacessível*. Essa é uma consideração importante, pois alguns leitores podem não estar aptos a acessarem os valores dos medidores, se essas caixas de texto estiverem desativadas.


Funções de Objetos
void addRange(Object range)
Inclui um intervalo para esse widget de medidor.
void addRanges(Array ranges)
Inclui uma coleta de objetos de intervalo para esse medidor.
void moveIndicatorToFront(Object indicator)
Move o indicador especificado para o início do medidor.
void drawText(String txt, Number x, Number y, String align, String vAlign)
Desenha texto no medidor.
void removeText(String t)
Remove o texto especificado do medidor.
void updateTooltip(String text)
Atualiza a exibição da ajuda ao passar o mouse sobre objetos no medidor com o texto especificado.
void handleMouseOver(Object event)
Suporte ao mouse.
void handleMouseOut(Object event)
Suporte ao mouse.
void handleMouseDown(Object event)
Suporte ao mouse.
void handleMouseUp(Object event)
Suporte ao mouse.
void handleMouseMove(Object event)
Suporte ao mouse.

Detalhes das Funções
addRange

addRanges

moveIndicatorToFront

drawText

removeText

updateTooltip

handleMouseOver

handleMouseOut

handleMouseDown

handleMouseUp

handleMouseMove

Os widgets a seguir (Intervalo, Matiz, GradientColor e Indicator) são utilizados principalmente para criar um medidor declarativamente, na marcação, ou em vez de utilizar um objeto anônimo para as outras funções do medidor.

Widget de Intervalo
Variáveis de Objetos
Número low O valor baixo ou mínimo desse intervalo.
Número high O valor alto ou máximo desse intervalo.
String hover O texto a ser inserido na exibição da ajuda ao passar o mouse sobre objetos, quando o mouse passa sobre esse intervalo.
String|Object color A cor desse intervalo. Também poderia ser um objeto ibm_gauge.widget.Gradient.
Número tamanho Para um medidor circular, como o AnalogGauge, esse valor indica o tamanho do arco.

Widget de Matiz
Variáveis de Objetos
String type O tipo de matiz. Consulte dojox.gfx.* para ver os tipos disponíveis.
Número x1 A coordenada x de onde a primeira cor é mais utilizada.
Número x2 A coordenada x de onde a segunda cor é mais utilizada.
Número y1 A coordenada y de onde a primeira cor é mais utilizada.
Número y2 A coordenada y de onde a segunda cor é mais utilizada.
Array colors As duas cores a serem utilizadas para esse matiz. Essas cores são geralmente um objeto ibm_gauge.widget.GradientColor ou um objeto anônimo com propriedades comparáveis.

Funções de Objetos
Objeto getFillObject()
Obtém esse widget como um objeto de preenchimento anônimo.

Detalhes das Funções
getFillObject

Widget de Cor de Matiz
Variáveis de Objetos
Número offset O deslocamento dessa cor, que é 0 ou 1.
String color A cor a ser utilizada. Geralmente uma cor de estilo CSS, como branco ou #000000.

Funções de Objetos
Objeto getColorObject()
Obtém esse widget como um objeto de cor anônima.

Detalhes das Funções
getcolorObject

Widget de Indicador
Variáveis de Objetos
Número Value O valor no medidor que esse indicador representa.
String type O tipo de indicador. Os exemplos possíveis incluem line, arrow e bar. Os valores possíveis dependem do tipo de medidor.
String color A cor desse indicador. Geralmente uma cor de estilo CSS.
String etiqueta O rótulo para esse indicador.
Número length O comprimento do indicador.
Número width A largura ou espessura do indicador.
Número offset O deslocamento do indicador.
String hover O texto a ser digitado na exibição da ajuda ao passar o mouse sobre objetos, quando o mouse passa sobre esse indicador.
String|Function onDragMove A função a ser chamada quando o indicador é movido com uma ação arrastar. Esse valor pode ser um nome de função ou a própria função.

Widget de Medidor Analógico

O widget de medidor analógico fornece um medidor gráfico circular para indicar valores numéricos, muito semelhante a um velocímetro ou um manômetro. Esse medidor pode ter quaisquer valores de ângulos inicial e final, fornecendo medidores em várias formas baseadas em círculos, inclusive círculos cheios, semicírculos e arcos. O medidor analógico estende a superclasse _Gauge, herdando todas as suas variáveis, propriedades e funções.

Variáveis de Objetos
Número gaugeWidth Substitui a propriedade _Gauge com o mesmo nome. Essa variável indica a largura do medidor e configura o padrão para 300 pixels.
Número gaugeHeight Substitui a propriedade _Gauge com o mesmo nome. Essa variável indica a altura do medidor e configura o padrão para 200 pixels.
Número cx A coordenada x do centro do medidor, na área de superfície prescrita. O padrão é gaugeWidth/2.
Número cy A coordenada y do centro do medidor, na área de superfície prescrita. O padrão é gaugeHeight/2.
Número radius O raio do intervalo. O padrão é o valor inferior entre os valores cx-25 e cy-25.
Número startAngle Indica o ângulo, em graus, onde o medidor inicia. O padrão é -90.
Número endAngle Indica o ângulo, em graus, onde o medidor termina. O padrão é -90.

Funções de Objetos
void addIndicator(Object indicator)
Inclui o indicador especificado nesse medidor.
Número getAngle(Number value)
Para um determinado valor numérico indicado no medidor, obtém o ângulo que corresponde a esse valor.
Número getValueForAngle(Number angle)
Para um determinado ângulo, obtém o valor ao qual o ângulo corresponde.
Número getRadians(Number angle)
Converte de graus para radianos.
Número getDegrees(Number radians)
Converte de radianos para graus.
void draw()
Desenha ou redesenha o medidor.
void drawRange(Object range)
Desenha o intervalo especificado nesse medidor.
void drawIndicator(Object indicator)
Desenha o indicador especificado nesse medidor.
void moveIndicator(Object indicator)
Move o indicador especificado nesse medidor.
Objeto getRangeUnderMouse(Object event)
Determina o intervalo sobre o qual o cursor do mouse passa atualmente.

Detalhes das Funções
addIndicator

getAngle

getValueForAngle

getRadians

getDegrees

draw

drawRange

drawIndicator

moveIndicator

getRangeUnderMouse

Widget de Gráfico de Barras

O widget de gráfico de barras fornece uma visualização gráfica para dados numéricos na forma de um gráfico de barras horizontal de coluna única. O gráfico de barras pode ter qualquer número de barras horizontais na mesma coluna, indicadores de destino e marcas de visto. O widget de gráfico de barras estende a superclasse _Gauge, herdando todas as suas variáveis, propriedades e funções.

Variáveis de Objetos
Número gaugeWidth Substitui a propriedade _Gauge com o mesmo nome. Essa variável indica a largura do medidor e configura o padrão para 250 pixels.
Número gaugeHeight Substitui a propriedade do _Gauge com o mesmo nome. Essa variável indica a altura do medidor e configura o padrão para 35 pixels.
Número dataX A coordenada x, em pixels, em que a área de dados é iniciada. O padrão é 5.
Número dataY A coordenada y de onde a área de dados deve ser iniciada, em pixels. O padrão é 5.
Número dataWidth A largura, em pixels, da área de dados. O padrão é gaugeWidth-10.
Número dataHeight A altura, em pixels, da área de dados. O padrão é gaugeHeight-10.

Funções de Objetos
void addIndicator(Object indicator)
Inclui o indicador especificado nesse gráfico de barras.
Número getPosition(Number value)
Obtém a posição de coordenada que representa um valor especificado.
Número getValueForPosition(Number position)
Obtém o valor para a posição de coordenada especificada.
void draw()
Desenha ou redesenha o gráfico de barras.
void drawRange(Object range)
Desenha o intervalo especificado nesse gráfico de barras.
void drawIndicator(Object indicator)
Desenha o indicador especificado nesse gráfico de barras.
void moveIndicator(Object indicator)
Move o indicador especificado nesse gráfico de barras.
void resizeIndicator(Object indicator)
Redimensiona o indicador especificado nesse gráfico de barras.
Objeto getRangeUnderMouse(Object event)
Determina o intervalo sobre o qual o cursor do mouse passa.

Detalhes das Funções
addIndicator

getPosition

getValueForPosition

draw

drawRange

drawIndicator

moveIndicator

resizeIndicator

getRangeUnderMouse