Widget de gráfico de Pareto (con temas)
Introducción
Permite mostrar un gráfico de Pareto.
El tipo de gráfico de Pareto es una combinación de gráficos de barras y un gráfico de líneas. Los valores individuales se representan en orden descendente mediante gráficos de barras y un gráfico de líneas representa el valor acumulado. La línea acumulativa del gráfico de Pareto se calcula automáticamente en función de los datos de las barras.
Consulte el siguiente vídeo sobre cómo crear un diagrama de Pareto en Mashup Builder. Para ver el vídeo en una ventana de mayor tamaño, pulse en el título del vídeo.
 | • El widget de gráfico de Pareto está disponible a partir de ThingWorx 9.1 y en versiones posteriores. • Este widget está disponible como una inclusión Estándar en la plataforma y como componente Web si se importa desde el SDK. |
Formato de los datos
Se debe crear una infotable con definiciones de campo que representen la estructura de los datos del gráfico. La infotable debe incluir una definición de campo para los valores de los ejes X e Y. Se pueden añadir varias series de datos añadiendo columnas adicionales con definiciones de campo para los valores de la serie de datos. Cada fila de la infotable representa una categoría en el eje X y sus valores del eje Y correspondientes. En la siguiente tabla se muestra el formato de los datos de la infotable:
Eje X | Valor del eje Y | Valor N del eje Y | |
|---|---|---|---|
Definición de campo | x:{name:'x',baseType:'STRING'} | value1:{name:'value1',baseType:'NUMBER'} | value1:{name:'value2',baseType:'NUMBER'} |
Uso | Permite definir los valores del eje X para la barra o columna del gráfico. Los datos deben tener un tipo base STRING. Cada fila se muestra como una categoría en el eje X. El nombre definido para esta columna es la opción que se debe seleccionar para la propiedad de widget XAaxisField. | Permite definir el valor del eje Y y el rótulo de leyenda para la categoría. | Permite definir el valor del eje Y y el rótulo de leyenda para cada serie de datos adicional. |
Tipo base | STRING | NUMBER | NUMBER |
Ejemplo de fila | x:'Apple': donde Apple es el nombre de la categoría que se debe mostrar en el eje X. | value1:10: el valor del eje Y para la categoría. | value2:30: el valor del eje Y para la segunda serie de datos. |
En la siguiente imagen se muestra un ejemplo de los datos devueltos de una infotable con cuatro definiciones de campo para el eje Y:
Tabla de propiedades
En la siguiente tabla se enumeran las propiedades que están disponibles en ThingWorx 9.4 y versiones posteriores:
Nombre de la propiedad | Descripción | Tipo base | Valor por defecto | Enlazable | Localizable |
|---|---|---|---|---|---|
SampleSize | Permite especificar el número de puntos de datos que se debe mostrar en el gráfico. | NUMBER | n/d | N | No |
ShowZoomButtons | Se muestran los botones de ampliar y alejar en la barra de herramientas del gráfico cuando el zoom horizontal o vertical está activado. | BOOLEAN | Falso | N | No |
EmptyChartIcon | Permite especificar el icono que se debe mostrar cuando el gráfico está vacío. | Entidad multimedia | not visible | N | No |
EmptyChartLabel | Permite especificar el texto que se debe mostrar cuando el gráfico está vacío. | STRING | [[ChartStateLabelEmpty]] | N | S |
ErrorStateIcon | Permite especificar el icono que se debe mostrar cuando el gráfico está vacío. | Entidad multimedia | error | N | No |
ErrorStateLabel | Permite especificar el texto que se debe mostrar cuando el gráfico está vacío. | STRING | N | S | |
LoadingIcon | Permite especificar el icono que se debe mostrar cuando se estén cargando los datos del gráfico. | Entidad multimedia | chart loading icon | N | No |
NoDataSourceIcon | Permite especificar el icono que se debe mostrar cuando el gráfico no está enlazado a ningún origen de datos. | Entidad multimedia | bind | N | No |
NoDataSourceLabel | Permite especificar el texto que se debe mostrar cuando el gráfico no está enlazado a ningún origen de datos. | STRING | [[ChartStateLabelNoData]] | N | S |
Las propiedades del widget de gráfico de Pareto son las siguientes:
Nombre de la propiedad | Descripción | Tipo base | Valor por defecto | ¿Es enlazable? (Sí/No) | ¿Es localizable? (Sí/No) | ||
|---|---|---|---|---|---|---|---|
CumulativeLineLabel | Permite especificar el texto que se muestra para el rótulo de línea acumulativa en el área de leyendas. | STRING | Porcentaje | S | S | ||
CumulativeLineMarkerShape | Permite definir la forma del marcador para los puntos de datos en la línea acumulativa. Las opciones disponibles son Círculo, Cuadrado, Rombo o Ninguno. | STRING | Círculo | S | N | ||
CumulativeLineMarkerSize | Permite definir el tamaño del marcador para los puntos de datos de la línea acumulativa. | NUMBER | 8 | S | N | ||
CustomClass | Clase CSS definida por el usuario que se aplica al elemento div superior del widget. Pueden introducirse varias clases, separadas por un espacio. | STRING | n/d | S | N | ||
Data | El origen de datos de infotable para el gráfico. | INFOTABLE | n/d | S | N | ||
DataLabel1 a DataLabel24 | Estas propiedades se muestran cuando NumberOfSereis se define en un número específico. Las propiedades se pueden utilizar para especificar un rótulo personalizado para cada serie de datos de la leyenda. Para obtener más información, consulte Personalización de la leyenda del gráfico. | STRING | n/d | N | S | ||
DataSeriesStyle | Permite configurar el formato de estado para todas las series de datos del gráfico. Se puede aplicar un estilo a la serie según los valores de datos para detectar tendencias y patrones con mayor facilidad. Para configurar las reglas de formato para cada serie de datos, introduzca un valor específico para la propiedad NumberOfSeries. | STATEDEFINITION | n/d | N | No | ||
EmphasizeThresholdFactors | Permite enfatizar los datos que se encuentran por debajo del valor de umbral especificado. | BOOLEAN | Falso | S | N | ||
ExternalPadding | Permite definir el relleno a partir de los ejes. El relleno es el porcentaje del ancho de barra. | NUMBER | 25 | S | N | ||
HideCumulativeLine | Permite ocultar la línea que muestra el porcentaje acumulado. | BOOLEAN | Falso | S | N | ||
HideLegend | Permite ocultar el área de la leyenda. | BOOLEAN | Falso | S | N | ||
HideNotes | Permite ocultar el área notas. | BOOLEAN | Falso | S | N | ||
HideSecondYAxis | Permite ocultar el segundo eje Y. | BOOLEAN | Falso | S | N | ||
HideXAxis | Permite ocultar el eje X. | BOOLEAN | Falso | S | N | ||
HideYAxis | Permite ocultar el eje Y. | BOOLEAN | Falso | S | N | ||
HorizontalAxisMaxHeight | Permite definir una altura máxima para el eje horizontal. | NUMBER | 85 | S | N | ||
HorizontalAxisLabelsRotation | Permite definir el ángulo de rotación de los rótulos en el eje horizontal. Se puede introducir un valor de -180 a 180. | NUMBER | Tamaño automático | N | No | ||
HorizontalZoom | Permite ampliar el eje horizontal. Al seleccionar esta propiedad, las propiedades adicionales HorizontalRangeZoom, HorizontalSliderZoom, DirectSelectionZoom y DragSelectionZoom aparecen en la lista de propiedades. | BOOLEAN | Falso | S | N | ||
DirectSelectionZoom | Permite ampliar directamente, mediante la selección de dos elementos de datos del gráfico. Las opciones disponibles son Eje horizontal y Ninguno. | STRING | Ninguno | S | N | ||
DragSelectionZoom | Permite ampliar una parte específica del gráfico dibujando un cuadro de selección alrededor del rango de datos que se desea ver. Las opciones disponibles son Eje horizontal y Ninguno. | STRING | Ninguno | S | N | ||
HorizontalRangeZoom | Permite añadir controles para especificar un rango de valores y ampliar el eje horizontal. Cuando se selecciona esta propiedad, las propiedades HorizontalStartZoomLabel y HorizontalEndZoomLabel aparecen en la lista de propiedades. | BOOLEAN | Falso | S | N | ||
HorizontalStartZoomLabel | Permite especificar el rótulo de texto para el inicio de la selección de rango. | STRING | n/d | S | S | ||
HorizontalEndZoomLabel | Permite especificar el rótulo de texto para el fin de la selección de rango. | STRING | n/d | S | S | ||
HorizontalSliderZoom | Permite añadir un control de corredera para mostrar los datos entre un valor mínimo y uno máximo en el eje horizontal. Cuando se selecciona esta propiedad, las propiedades HorizontalSliderZoomMinLabel y HorizontalSliderZoomMaxLabel aparecen en la lista de propiedades. | BOOLEAN | Falso | S | N | ||
HorizontalSliderZoomMinLabel | Permite especificar el rótulo de texto para el valor mínimo del control de zoom de corredera. | STRING | n/d | S | S | ||
HorizontalSliderZoomMaxLabel | Permite especificar el rótulo de texto para el valor máximo del control de zoom de corredera. | STRING | n/d | S | S | ||
InternalPadding | Permite definir el relleno entre las series. El relleno es el porcentaje del ancho de barra. | NUMBER | 25 | S | N | ||
Label | Permite especificar el rótulo de texto que se muestra para el gráfico de Pareto. | STRING | Gráfico de Pareto | S | S | ||
LabelAlignment | Permite alinear el texto del rótulo del widget a la Izquierda, en el Centro o a la Derecha. | STRING | Izquierda | N | No | ||
LabelPosition | Permite definir la posición del rótulo de texto en Arriba o Abajo. | STRING | Arriba | N | No | ||
LabelReset | Permite especificar el rótulo del botón que redefine el zoom de los gráficos. | STRING | Redefinir | S | S | ||
LabelType | Permite definir el tipo de rótulo del gráfico de Pareto como Cabecera, Subcabecera, Rótulo o Cuerpo. | STRING | Subcabecera | S | N | ||
LegendAlignment | Permite alinear el texto de la leyenda Arriba, En medio o Abajo. Las opciones disponibles para esta propiedad dependen de la configuración de la propiedad LegendPosition. | STRING | Arriba | N | No | ||
LegendFilter | Permite añadir un filtro de leyenda de modo que se pueda filtrar el gráfico en tiempo de ejecución. | BOOLEAN | Falso | N | No | ||
LegendMarkerShapes | Permite definir la forma del marcador de las leyendas de series de datos en Cuadrado, Círculo o Ninguno. | STRING | Cuadrado | N | No | ||
LegendMaxWidth | Permite definir un ancho máximo para el área de la leyenda. | NUMBER | 736 | S | N | ||
LegendPosition | Permite definir la posición de la leyenda del gráfico en Arriba, Derecha, Abajo o Izquierda. | STRING | Derecha | N | No | ||
LineValuesPosition | Permite definir la posición de los rótulos de valores en relación con los puntos de datos de la línea. Las opciones disponibles son Por encima de, Solapar o Por debajo de. | STRING | Encima | N | No | ||
MultipleDataSources | Permite visualizar datos de varios orígenes de datos en el gráfico. Cuando se selecciona esta propiedad, las propiedades adicionales DataSource y XAxisField aparecen en la lista de propiedades. | BOOLEAN | Falso | N | No | ||
Notes | Permite especificar el texto que se debe mostrar en el área notas del gráfico. Se puede introducir una cadena o seleccionar un token de localización. | STRING | n/d | S | S | ||
NotesAlignment | Permite alinear el texto del área de notas a la Izquierda, en el Centro o a la Derecha. | STRING | Izquierda | N | No | ||
NotesPosition | Permite definir la posición del área de notas Arriba o Abajo. | STRING | Abajo | N | No | ||
NumberOfSeries | Permite definir el número de series de datos que se muestran en el gráfico. Por defecto, con la configuración automática se muestran todas las series en los datos de infotable. Según la configuración, las propiedades DataField adicionales de infotable aparecen en la lista de propiedades que se pueden utilizar para mostrar las series de datos numéricas correspondientes. Asimismo, las propiedades DataSeriesStyle de formato de estado adicionales aparecen en la lista de propiedades. | NUMBER | Automático | N | No | ||
NumberOfYLabels | Permite establecer el número de rótulos que se deben mostrar en el eje Y.
| NUMBER | Automático | N | No | ||
ResetToDefaultValue | Permite restaurar los valores por defecto de las entradas de este widget. | n/d | n/d | S | N | ||
RulersInFront | Permite mostrar las reglas delante de los valores de datos. Por defecto, las reglas se muestran detrás de los datos. | BOOLEAN | Falso | S | N | ||
SecondYAxisLabel | Permite especificar el rótulo de texto del segundo eje Y. | STRING | Porcentaje | S | S | ||
SecondYAxisLabelAlignment | Permite alinear el rótulo del segundo eje Y Arriba, En medio o Abajo. | STRING | En medio | N | No | ||
SecondYAxisMaximumValues | Permite definir el rango máximo para los valores del segundo eje Y. Por defecto, el máximo es el 100 %. | NUMBER | Automático | S | N | ||
SecondYAxisMinimumValues | Permite definir el rango mínimo para los valores del segundo eje Y. Por defecto, el mínimo es el 0 %. | NUMBER | Automático | S | N | ||
SeriesClicked | Permite activar un evento cuando se pulsa en un punto de datos del gráfico. | n/d | n/d | S | N | ||
ShowLineValues | Permite mostrar los rótulos de valores que se muestran en la línea dentro del gráfico. | BOOLEAN | Falso | S | N | ||
ShowHideLegend | Permite añadir un botón Mostrar/Ocultar para mostrar u ocultar la leyenda del gráfico en tiempo de ejecución.
| BOOLEAN | Falso | N | No | ||
ShowValues | Permite mostrar los rótulos de valores en el gráfico. | BOOLEAN | Falso | S | N | ||
ShowXAxisRuler | Permite mostrar la regla del eje X. | BOOLEAN | Falso | S | N | ||
ShowYAxisRuler | Permite mostrar la regla del eje Y. | BOOLEAN | Falso | S | N | ||
SparkView | Permite mostrar una vista simplificada de la visualización del gráfico. Seleccione esta propiedad para ocultar los rótulos, las leyendas y las reglas. | BOOLEAN | Falso | S | N | ||
ShowZoomButtons | Se muestran los botones de ampliar y alejar en la barra de herramientas del gráfico cuando el zoom horizontal o vertical está activado.
| BOOLEAN | Falso | N | No | ||
TabSequence | El número de secuencia del widget al pulsar el tabulador. | NUMBER | 0 | No | No | ||
ThresholdLine | Permite mostrar una línea horizontal o vertical que marca el valor de umbral del porcentaje acumulado. Las opciones disponibles para esta propiedad son Horizontal, Vertical, Ambos o Ninguno. | STRING | Horizontal | S | N | ||
ThresholdValue | Permite definir el valor de porcentaje para la línea de umbral. | NUMBER | 80 | S | N | ||
VerticalAxisMaxWidth | Permite definir un ancho máximo para el eje vertical. | NUMBER | 85 | S | N | ||
XAxisField | Permite especificar la columna de infotable con los datos de las categorías que se muestran en el gráfico. | INFOTABLE | n/d | N | No | ||
XAxisLabel | Permite especificar el rótulo de texto para el eje X. | STRING | Eje X | S | S | ||
XAxisLabelAlignment | Permite alinear el rótulo del eje X a la Izquierda, al Centro o a la Derecha. | STRING | Centro | N | No | ||
YAxisFormat | Permite definir el formato de los valores del eje Y. | STRING | 0000,0 | S | N | ||
YAxisLabel | Permite especificar el rótulo de texto del eje Y. | STRING | Eje Y | S | S | ||
YAxisLabelAlignment | Permite alinear el rótulo de texto del eje Y Arriba, En medio o Abajo. | STRING | En medio | N | No | ||
YAxisMaximumValues | Permite definir el rango máximo para los valores del eje Y. Por defecto, el rango se calcula automáticamente en función de los datos del widget. El valor de esta propiedad se desestima si los datos del gráfico contienen un valor mayor. | NUMBER | Automático | S | N | ||
YAxisMinimumValues | Permite definir el rango mínimo para los valores del eje Y. Por defecto, el rango se calcula automáticamente en función de los datos del widget. El valor de esta propiedad se desestima si los datos del gráfico contienen un valor inferior. | NUMBER | Automático | S | N |