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. |
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;
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.
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 |
---|
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("Texto de amostra", 100, 50, 'right');
var gauge = new ibm_gauge.widget.AnalogGauge({}); gauge.drawText("Texto de amostra", 100, 50, 'right'); gauge.removeText("Texto de amostra");
var gauge = new ibm_gauge.widget.AnalogGauge({}); gauge.updateTooltip("Texto a ser inserido na dica de ferramenta!");
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.
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. |
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 |
---|
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 |
---|
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. |
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 |
---|
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 |
---|