Los widgets de dispositivo indicador que se proporcionan representan una forma visualizar gráficamente datos numéricos. Se proporcionan dos widgets de dispositivo indicador: AnalogGauge y BarGraph. El código de ejemplo de este tema también está disponible para el dispositivo indicador analógico y el gráfico de barras.
El widget de dispositivo indicador analógico ofrece una forma de visualizar datos en un dispositivo indicador circular como, por ejemplo, un velocímetro o un indicador de presión. Para crear un dispositivo indicador analógico, determine primero la forma que desea que tenga el dispositivo indicador, qué indicadores desea mostrar en el dispositivo indicador, qué rangos desea crear en el rango y otros factores.
<div dojoType="ibm_gauge.widget.AnalogGauge" id="testGauge" cx=150 cy=175 radius=125></div>
El código anterior crea un nuevo widget de dispositivo indicador analógico, que se encuentra en el directorio div con un ID de testGauge. El dispositivo indicador actualmente no tiene rangos, indicadores ni marcas de escala. No obstante, el área de datos del dispositivo indicador viene indicada por los parámetros que se han pasado.
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'});
Este código añade cinco rangos al dispositivo indicador, con los valores de low, high y hover correspondientes. El valor de hover aparece cuando el ratón apunta a dicho rango.
for(var i=0; i<=50; i+=5){ g.addIndicator({ value:i, type:'line', length:5, offset:125, label:''+i}); }
El dispositivo indicador tiene ahora marcas de escala cada cinco unidades, con una pequeña línea y el valor indicado en texto. El bucle for en el método anterior es un proceso más eficaz que escribir los valores para cada marca de escala individual.
A continuación, añada un indicador de flecha al dispositivo indicador, para que esté funcionalmente completo.
var valueIndicator = { value:17, type:'arrow', color: 'yellow', length: 135, width: 3, hover:'Value: 17', title: 'Value' }; g.addIndicator(valueIndicator);
Los parámetros pasados se describen en el tema Referencia de dispositivos indicadores. No obstante, el parámetro value especifica el valor numérico actual en el dispositivo indicador donde se coloca inicialmente el indicador. El parámetro type indica el tipo de indicador. Para un dispositivo indicador analógico, los valores disponibles son arrow y line. Los parámetros lenght y width indican el tamaño de la flecha, y los parámetros hover y title especifican el texto atribuido al indicador.
var targetIndicator = { value:6, type:'line', color:'red', width: 3, hover:'Target: 6', title: 'Target' }; g.addIndicator(targetIndicator);
Ahora que ha creado un indicador de destino, también puede indicar el objetivo o un umbral de aviso. Existen varias posibilidades, ya que puede añadir un número cualquiera de indicadores al dispositivo indicador.
Si ha ejecutado el código o ha utilizado la versión completa al final de este tema, habrá observado que los indicadores con títulos tienen recuadros debajo del dispositivo indicador que indican valores numéricos. Estos recuadros aparecen por omisión para garantizar que el widget sea accesible para aquellos que utilizan lectores de pantalla, por ejemplo, para ver la pantalla. Los recuadros pueden inhabilitarse estableciendo el parámetro hideValues en true en el propio dispositivo indicador. No obstante, la inhabilitación de los recuadros no garantiza la inaccesibilidad del widget. El parámetro es el mismo también en el widget de gráfico de barras.
El widget de gráfico de barras se utiliza para mostrar información numérica de forma gráfica en un gráfico de barras. Existen varias posibilidades, al igual que con el widget de dispositivo indicador analógico. Puede añadir un número cualquiera de barras, indicadores, marcas de escala, texto, etc. en el widget. Véase el ejemplo de marcación siguiente:
<div dojoType="ibm_gauge.widget.BarGraph" id="testBarGraph" widgetId="testBarGraph" executeScripts="true" gaugeHeight="55" dataY="25" dataHeight="25" dataWidth="225"/>
En este ejemplo, se añade un fondo de gradiente al gráfico de barras. Los pasos siguientes se aplican también al widget de dispositivo indicador analógico, ya que ambos están manejados por la superclase _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: "white"}] }; bg.gaugeBackground = fill;
Este código añade un gradiente lineal vertical, que cambia de un color blanco al principio a un gris claro al final, como fondo del gráfico de barras. Hay disponibles tres tipos de gradientes. Puede encontrar más información en el tema Referencia de dispositivos indicadores.
De la misma forma que con el widget de dispositivo indicador analógico, puede añadir los siguientes rangos y marcas de escala:
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, puede añadir indicadores de destino y valor. Para el widget de gráfico de barras, el indicador de destino continúa siendo el tipo line; no obstante, el indicador de valor es el 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);
El gráfico de barras está ahora completo. Los indicadores de destino y valor pueden moverse con una acción de arrastrar desde el gráfico a nuevos valores. Asimismo, puede cambiar los valores en los recuadros de valor que hay debajo del gráfico de barras. De la misma forma que en el dispositivo indicador analógico, pueden inhabilitarse los recuadros que indican el valor.
<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: "white"}] }; 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>