Trabajar con widgets > 2D > Gráfico de barras
  
Gráfico de barras
¿Qué hace este widget?
El widget de Gráfico de barras muestra datos en un gráfico de barras.
* 
Los datos deben enlazarse al gráfico de barras.
¿Cuándo se aconseja utilizar este widget?
Casos de uso de un gráfico de barras:
• Para mostrar datos en una experiencia.
• Para comparar valores del mismo conjunto de datos.
¿Hay propiedades, servicios, eventos o acciones especiales?
Para ver una lista de propiedades, servicios y eventos comunes de widgets, consulte Propiedades, servicios y eventos comunes de widgets.
La tabla siguiente es una lista de propiedades, servicios y eventos específicos de este widget.
Propiedad
Descripción
Opciones de gráfico
Pulse en el icono de edición situado junto a Opciones de gráfico para acceder al ajuste Mostrar líneas de cuadrícula para el eje X.
Servicio
JavaScript
Descripción
Actualizar gráfico
updateChart
Actualiza el gráfico.
Widget en acción
A continuación se ofrece un ejemplo del aspecto que puede tener el widget.
Pasos mínimos para utilizarlo
Aspecto
1. Arrastre un widget de Gráfico de barras y suéltelo en el lienzo.
2. En el panel Datos, busque una entidad que tenga un servicio con una propiedad numérica del conjunto de datos.
3. Tras haber añadido el servicio, arrastre una propiedad numérica bajo Todos los elementos y suéltela en el widget; a continuación, seleccione Datos en la ventana Seleccionar destino de enlace.
4. En el panel Datos, bajo Configuración, seleccione la casilla Invocar al inicio.
5. En el menú desplegable Campo de eje X, seleccione una propiedad. En este ejemplo, se selecciona Velocidad.
6. En el menú desplegable Campo de eje Y, seleccione una propiedad. En este ejemplo, se selecciona RPM.
Aplicar estilos al widget con JavaScript y CSS
JavaScript puede utilizarse para aplicar estilos al widget. Este es un ejemplo:
* 
Es aconsejable asignar nombres exclusivos a las clases; de este modo, no entrarán en conflicto con otras clases ni con propiedades de OOTB.
Ejemplo
Aspecto
1. Indique los datos siguientes en el editor de JavaScript:
Chart.defaults.global.legend.position="bottom";
Chart.defaults.global.legend.labels.fontColor="#912f46";
Chart.defaults.global.defaultFontColor="#00acc8";
Chart.defaults.global.defaultFontSize=20;
Chart.defaults.global.title.display=true;
2. Añada la clase siguiente al editor de aplicaciones:
.ptc-barchart {
height: 500px;
}
3. Indique la clase nueva en el campo Clase del gráfico de barras.
Para obtener más información, consulte Uso de JavaScript en Vuforia Studio y Estilos de aplicación.
Campos de configuración asistida después de enlazar datos de ThingWorx
Tras haber enlazado datos de ThingWorx en el widget, algunos campos se rellenan con opciones de una lista desplegable. Por ejemplo, si Todos los elementos se enlaza con el widget de Gráfico de barras y se selecciona Datos en la ventana Seleccionar destino de enlace, las propiedades de Campo de eje X y de Campo de eje Y se rellenan con opciones disponibles.