Os widgets de medidor fornecidos representam uma maneira de exibir dados numéricos graficamente. Dois widgets de medidor são fornecidos: AnalogGauge e BarGraph. O código de exemplo neste tópico também está disponível para o medidor analógico e o gráfico de barras.
O widget de medidor analógico fornece uma maneira de exibir dados em um medidor circular, tal como um velocímetro ou manômetro. Para criar um medidor analógico, primeiro determine a forma que você deseja para o medidor, quais indicadores deseja exibir no medidor, quais intervalos deseja criar no intervalo e outros fatores.
<div dojoType="ibm_gauge.widget.AnalogGauge" id="testGauge" cx=150 cy=175 radius=125></div>
O código anterior cria um novo widget de medidor analógico, localizado no div com um ID de testGauge. O medidor não possui atualmente intervalos, indicadores ou marcas de visto. A área de dados para o medidor é indicada, entretanto, pelos parâmetros que foram transmitidos.
var g = dijit.byId("testGauge"); g.addRange({low:0, high:10, hover:'0 - 10'}); g.addRange({low:10, high:20, hover:'10 - 20'}); g.addRange({low:20, high:30, hover:'20 - 30'}); g.addRange({low:30, high:40, hover:'30 - 40'}); g.addRange({low:40, high:50, hover:'40 - 50'});
Esse código inclui cinco intervalos no medidor, com os valores low, high e hover apropriados. O valor hover é exibido quando o mouse aponta para um intervalo específico.
for(var i=0; i<=50; i+=5){ g.addIndicator({ value:i, type:'line', length:5, offset:125, label:''+i}); }
O medidor possui agora marcas de visto a cada cinco unidades, com uma pequena linha e o valor indicado no texto. O loop for no método anterior é um processo mais eficiente do que gravar os valores para cada marca de visto individual.
Em seguida, inclua um indicador de seta no medidor, tornando-o funcionalmente completo.
var valueIndicator = { value:17, type:'arrow', color: 'yellow', length: 135, width: 3, hover:'Value: 17', title: 'Value' }; g.addIndicator(valueIndicator);
Os parâmetros transmitidos são descritos no tópico Referência de Medidores. Entretanto, o parâmetro value especifica o valor numérico atual no medidor onde o indicador está posicionado inicialmente. O type indica o tipo de indicador. Para um medidor analógico, os valores disponíveis são arrow e line. Length e width indicam o tamanho da seta e os parâmetros hover e title especificam o texto atributo ao indicador.
var targetIndicator = { value:6, type:'line', color:'red', width: 3, hover:'Target: 6', title: 'Target' }; g.addIndicator(targetIndicator);
Agora que você criou um indicador de destino, também pode indicar a meta ou um limite de aviso. Existem várias possibilidades, uma vez que você pode incluir vários indicadores no medidor.
Se você executou seu código ou utilizou a versão completa no final deste tópico, pode observar que os indicadores com títulos possuem caixas abaixo do medidor que indicam valores numéricos. Essas caixas são exibidas, por padrão, para assegurar que esse widget seja acessível àqueles que utilizam leitores de tela, por exemplo, para visualizar a página. É possível desativar as caixas configurando o parâmetro hideValues como true no próprio medidor. Entretanto, a desativação das caixas torna o widget inacessível. O parâmetro é o mesmo também no widget de gráfico de barras.
O widget de gráfico de barras é utilizado para exibir informações numéricas graficamente em um gráfico de barras. Existem várias possibilidades, tal como ocorre com o widget de medidor analógico. Você pode incluir qualquer número de barras, indicadores, marcas de visto, texto e etc no widget. Veja o seguinte exemplo de marcação:
<div dojoType="ibm_gauge.widget.BarGraph" id="testBarGraph" widgetId="testBarGraph" executeScripts="true" gaugeHeight="55" dataY="25" dataHeight="25" dataWidth="225"/>
Neste exemplo, você inclui um plano de fundo de matiz no gráfico de barras. As etapas a seguir são aplicáveis também aos widgets de medidor analógico, uma vez que eles são manipulados pela superclasse _Gauge.
var bg = dijit.byId("testBarGraph"); var fill = { type: "linear", x1: bg.gaugeWidth/2, x2: bg.gaugeWidth/2, y2: 0, y1: bg.gaugeHeight, colors: [{offset: 0, color: "#ECECEC"}, {offset: 1, color: "branco"}] }; bg.gaugeBackground = fill;
Esse código inclui matiz linear vertical, de uma cor branca no início a um cinza claro no final, para o plano de fundo do gráfico de barras. Há três tipos de matiz disponíveis. Mais informações estão disponíveis no tópico Referência de Medidores.
Exatamente como no widget de medidor analógico, você pode incluir os seguintes intervalos e marcas de visto:
bg.addRange({low:0, high:10, hover:'0 - 10'}); bg.addRange({low:10, high:20, hover:'10 - 20'}); bg.addRange({low:20, high:30, hover:'20 - 30'}); bg.addRange({low:30, high:40, hover:'30 - 40'}); bg.addRange({low:40, high:50, hover:'40 - 50'}); for(var i=0; i<=50; i+=5){ bg.addIndicator({ value:i, type:'line', length:5, offset:-5, width: 1, label:''+i }); }
Por último, você pode incluir indicadores de destino e de valor. Para o widget de gráfico de barras, o indicador de destino ainda é o tipo line; entretanto, o indicador de valor é o tipo bar.
var valueIndicator = { value:17, type:"bar", width: 7, hover:'Value: 17', title: 'Value' } bg.addIndicator(valueIndicator); var targetIndicator = { value:22, type:"line", color:'#D00000', hover:'Target: 22', title: 'Target' } bg.addIndicator(targetIndicator);
O gráfico de barras está agora completo. Os indicadores de destino e de valor podem ser movidos com uma ação arrastar do gráfico para novos valores. Além disso, você pode alterar os valores nas caixas de valores abaixo do gráfico de barras. Como no indicador analógico, as caixas que indicam o valor podem ser desativadas.
<div dojoType="ibm_gauge.widget.AnalogGauge" id="testGauge" cx=150 cy=175 radius=125></div> <script> dojo.addOnLoad(function(){ var g = dijit.byId("testGauge"); g.addRange({low:0, high:10, hover:'0 - 10'}); g.addRange({low:10, high:20, hover:'10 - 20'}); g.addRange({low:20, high:30, hover:'20 - 30'}); g.addRange({low:30, high:40, hover:'30 - 40'}); g.addRange({low:40, high:50, hover:'40 - 50'}); for(var i=0; i<=50; i+=5){ g.addIndicator({ value:i, type:'line', length:5, offset:125, label:''+i}); } var valueIndicator = { value:17, type:'arrow', color:'yellow', length: 135, width: 3, hover:'Value: 17', title: 'Value' }; g.addIndicator(valueIndicator); var targetIndicator = { value:6, type:'line', color:'red', width: 3, hover:'Target: 6', title: 'Target' }; g.addIndicator(targetIndicator); }); </script>
<div dojoType="ibm_gauge.widget.BarGraph" id="testBarGraph" widgetId="testBarGraph" gaugeHeight="55" dataY="25" dataHeight="25" dataWidth="225"/> <script> dojo.addOnLoad(function(){ var bg = dijit.byId("testBarGraph"); var fill = { type: "linear", x1: bg.gaugeWidth/2, x2: bg.gaugeWidth/2, y2: 0, y1: bg.gaugeHeight, colors: [{offset: 0, color: "#ECECEC"}, {offset: 1, color: "branco"}] }; bg.gaugeBackground = fill; bg.addRange({low:0, high:10, hover:'0 - 10'}); bg.addRange({low:10, high:20, hover:'10 - 20'}); bg.addRange({low:20, high:30, hover:'20 - 30'}); bg.addRange({low:30, high:40, hover:'30 - 40'}); bg.addRange({low:40, high:50, hover:'40 - 50'}); for(var i=0; i<=50; i+=5){ bg.addIndicator({ value:i, type:'line', length:5, offset:-5, width: 1, label:''+i }); } var valueIndicator = { value:17, type:"bar", width: 7, hover:'Value: 17', title: 'Value' } bg.addIndicator(valueIndicator); var targetIndicator = { value:22, type:"line", color:'#D00000', hover:'Target: 22', title: 'Target' } bg.addIndicator(targetIndicator); }); </script>