Widget de gráfico combinado (con temas)
Resumen
El widget de gráfico combinado permite representar series de datos en el gráfico mediante múltiples tipos de marcador, como columnas, líneas, área y puntos. Se pueden superponer múltiples conjuntos de datos utilizando distintos tipos de visualización para comparar las cantidades de unidades en múltiples series de datos. El eje Y representa la cantidad y el eje X representa la categoría. La visualización de datos mediante distintos tipos de visualización del gráfico facilita la lectura de las distintas escalas de los ejes Y.
A continuación se describen algunas de las configuraciones principales que están disponibles para el gráfico combinado.
• Visualizar series de datos mediante líneas, columnas, áreas y puntos.
• Enlazar datos desde múltiples orígenes.
• Configurar el orden ZIndex de las pilas de las series de datos.
• Aplicar el formato de estado para aplicar un estilo al gráfico según los valores.
• Agrupar y apilar series de datos.
Prácticas recomendadas
• Mantenga activada la realización del muestreo de datos para mejorar el rendimiento del gráfico en tiempo de ejecución. La desactivación del muestreo de datos puede provocar un rendimiento más lento si en el gráfico se muestran miles de puntos de datos de múltiples series. Solo se debe desactivar el muestreo cuando el conjunto de datos del gráfico es pequeño.
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. Los datos deben tener un tipo base STRING, NUMBER o DATETIME. 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 o DATETIME
| 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 serie de datos N. |
En la siguiente imagen se muestra un ejemplo de los datos devueltos de una infotable con cuatro definiciones de campo para el eje Y:
Propiedades de los widgets
A continuación se enumeran las propiedades del widget de gráfico combinado.
Nombre de la propiedad | Descripción | Tipo base | Valor por defecto | ¿Es enlazable? (Sí/No) | ¿Es localizable? (Sí/No) |
|---|---|---|---|---|---|
AlignBarsAtZero | Permite alinear en cero las barras de todos los ejes Y del gráfico. | BOOLEAN | Falso | S | N |
AxisDisplayControl | Permite agregar un menú de configuración a la barra de herramientas del gráfico que permite controlar la visibilidad de los ejes Y en tiempo de ejecución. | BOOLEAN | Falso | S | N |
ChartType | Permite definir el tipo de visualización por defecto que se utiliza para mostrar los datos de la serie en el gráfico. Esta selección se puede sustituir manualmente para cada serie de datos mediante la propiedad SeriesNType. | STRING | Line | N | N |
CustomClass | Permite especificar la clase CSS personalizada que se debe aplicar a este widget. Se pueden introducir múltiples 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 |
DataFieldN | Permite especificar el campo de infotable que se debe utilizar para la serie de datos N. | Infotable | N/D | N | N |
DataLabelN | El rótulo que se debe mostrar en el área de leyendas de la serie de datos N. | STRING | N/D | S | S |
DataPointSelection | Permite especificar el punto de datos que se debe seleccionar en relación con la posición del puntero. Se puede definir la propiedad para seleccionar el punto de datos más cercando en el eje vertical, el eje horizontal o en ambos ejes. Opciones: • Ninguno • Posición del puntero • Horizontal más cercano • Vertical más cercano • Ambos ejes | STRING | N/D | S | N |
DataSeriesStyleN | Permite aplicar el formato de estado de la serie de datos N en el gráfico. Se puede aplicar un estilo a la serie según los valores de datos para detectar tendencias y patrones con mayor facilidad. | Formato de estado | N/D | N | N |
DirectSelectionZoom | Permite ampliar mediante la selección de dos elementos de datos del gráfico. Las opciones disponibles para esta propiedad son Eje horizontal, Eje vertical, Ambos y Ninguno. Esta propiedad aparece en la lista de propiedades cuando se selecciona HorizontalZoom o VerticalZoom. | 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 para esta propiedad son Eje horizontal, Eje vertical, Ambos y Ninguno. Esta propiedad aparece en la lista de propiedades cuando se selecciona HorizontalZoom o VerticalZoom. | STRING | Ninguno | S | N |
Disabled | Permite desactivar el widget en el mashup. | BOOLEAN | N/D | S | N |
DisplaySeriesNOn | Permite definir el eje Y o el grupo de apilamiento para la serie de datos N. | STRING | N | N | |
EmptyChartIcon | Permite especificar el icono que se debe mostrar cuando el gráfico está vacío. | MEDIOS | not visible | N | N |
EmptyChartLabel | Permite especificar el texto que se debe mostrar cuando la infotable enlazada no contiene datos. | STRING | [[ChartStateLabelEmpty]] | N | S |
ErrorStateIcon | Permite especificar el icono que se debe mostrar cuando no se pueden cargar los datos del gráfico. | MEDIOS | error | N | N |
ErrorStateLabel | Permite especificar el texto que se debe mostrar cuando no se pueden cargar los datos del gráfico. | STRING | [[ChartStateLabelError]] | N | N |
ExternalPadding | Permite definir el relleno a partir de los ejes. El valor de relleno es un porcentaje del ancho de la barra. | NUMBER | 25 | S | N |
GroupPadding | Permite definir el relleno entre las series. El valor de relleno es un porcentaje del ancho de la barra. | NUMBER | 25 | S | N |
HideLegend | Permite ocultar el área de la leyenda. | BOOLEAN | Falso | S | N |
HideNotes | Permite ocultar el área notas. | BOOLEAN | Falso | S | N |
HideValues | Permite ocultar los rótulos de valor del gráfico. | BOOLEAN | Falso | S | N |
HideXAxis | Permite ocultar el eje X. | BOOLEAN | Falso | S | N |
HideYAxisN | Permite ocultar el eje Y de la serie de datos N. | BOOLEAN | Falso | S | N |
HorizontalAxisLabelsRotation | Introduzca un valor de -180 a 180 para definir el ángulo de rotación de los rótulos sobre el eje horizontal. | NUMBER | Calculado automáticamente | N | N |
HorizontalAxisMaxHeight | Permite definir una altura máxima para el eje horizontal. | NUMBER | 85 | S | N |
HorizontalZoom | Permite ampliar o reducir el eje horizontal. Cuando se selecciona esta propiedad, las propiedades HorizontalIntervalControl, HorizontalRangeZoom, HorizontalSliderZoom, DirectSelectionZoom y DragSelectionZoom aparecen en la lista de propiedades. | BOOLEAN | Falso | S | N |
HorizontalIntervalControl | Permite añadir controles que permiten ampliar el eje horizontal según intervalos específicos. Las opciones disponibles son Ninguno, que es la selección por defecto, y Lista desplegable. Cuando se selecciona Lista desplegable, las propiedades HorizontalIntervalControlLabel y HorizontalIntervalData aparecen en la lista de propiedades. | STRING | Ninguno | N | N |
HorizontalIntervalControlLabel | Permite especificar el rótulo de texto de los controles de zoom de intervalo para el eje horizontal. | STRING | n/d | S | S |
HorizontalIntervalData | El origen de datos de las opciones de control de zoom de intervalo. Cuando se selecciona una entrada de la lista desplegable de intervalos horizontales, el gráfico se amplía según el valor de duración seleccionado y el punto de anclaje inicial/final. | INFOTABLE | n/d | S | N |
HorizontalIntervalAnchorPoint | Permite seleccionar la posición de anclaje del rango de intervalos en el conjunto de datos. Seleccione Inicio para colocar el intervalo al principio del conjunto de datos o Fin para colocar el intervalo al final. Por ejemplo, si se especifica un intervalo de 3 meses en un conjunto de datos de 12 meses, se puede seleccionar Inicio para mostrar los 3 primeros meses o Fin para mostrar los últimos 3 meses del conjunto de datos. Esta propiedad aparece cuando se selecciona la propiedad ShowHorizontalAnchorPointControl. | STRING | Inicio | S | N |
HorizontalIntervalAnchorPointLabel | Permite especificar el rótulo del punto de anclaje del intervalo para el eje horizontal. Esta propiedad aparece cuando se selecciona la propiedad ShowHorizontalAnchorPointControl. | STRING | n/d | S | S |
HorizontalRangeZoom | Permite añadir controles para especificar un rango de valores y ampliar el eje horizontal. Cuando se selecciona esta propiedad, las siguientes 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 HorizontalSliderZoomMaxLabel y HorizontalSliderZoomMinLabel aparecen en la lista de propiedades. | BOOLEAN | Falso | S | N |
HorizontalSliderZoomMaxLabel | Permite especificar el rótulo del valor máximo del control de zoom de corredera. | STRING | n/d | S | S |
HorizontalSliderZoomMinLabel | Permite especificar el rótulo del valor mínimo del control de zoom de corredera. | STRING | n/d | S | S |
InternalPadding | Permite definir el relleno entre las series. El valor de relleno es un porcentaje del ancho de la barra. | NUMBER | 25 | S | N |
Label | Permite especificar el rótulo de texto que se va a mostrar para el gráfico combinado. | STRING | [[ComboChart]] | S | S |
LabelReset | Permite definir el rótulo que se muestra dentro del botón de redefinición en la barra de herramientas del gráfico. | STRING | Redefinir | S | S |
LabelAlignment | Permite alinear el texto para el rótulo del widget. Opciones: Ninguno, Izquierda, Centro, Derecha. | STRING | Izquierda | N | N |
LabelPosition | Permite definir la posición del rótulo de texto. Opciones: Ninguno, Superior, Abajo, Izquierda. | STRING | Arriba | N | N |
LabelType | Permite definir el tipo de rótulo para el gráfico combinado, como Cabecera, Subcabecera, Rótulo o Cuerpo. | STRING | Subcabecera | S | N |
LegendAlignment | Permite alinear la leyenda del gráfico. | STRING | Izquierda | N | N |
LegendFilter | Permite añadir casillas junto a series de datos en la leyenda que controlan la visibilidad de las series de datos. | BOOLEAN | Falso | N | N |
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. Opciones: Ninguno, Izquierda, Centro, Derecha. | STRING | Izquierda | N | N |
LoadingIcon | Permite especificar el icono que se debe mostrar cuando se estén cargando los datos del gráfico. | STRING | chart_loading_combo_pareto | N | N |
Margin | Esta propiedad está desactivada. Se deben definir los márgenes para este widget dinámico en su contenedor. | STRING | 5 | N | N |
MarkerShape | Permite definir la forma del marcador para los puntos de datos del gráfico. Opciones: Ninguno, Círculo, Cuadrado, Rombo. | STRING | Círculo | N | N |
MultipleDataSources | Permite activar la visualización de datos de varios orígenes en el gráfico. | BOOLEAN | Falso | N | |
NoDataSourceIcon | Permite especificar el icono que se debe mostrar cuando el gráfico no está enlazado a ningún origen de datos. | Medios | bind | N | N |
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 |
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 dentro del área de notas. | STRING | Izquierda | N | N |
NotesPosition | Permite definir la posición del área de notas. | STRING | Abajo | N | N |
NumberOfReferenceLines | Permite definir el número de líneas de referencia que se deben mostrar en el gráfico. Las líneas de referencia se utilizan para realzar los datos del gráfico en relación con un valor específico. Se puede añadir un máximo de 24 líneas y configurar el rótulo, el eje y el valor de cada línea. | NUMBER | 0 | N | N |
NumberOfSeries | Permite definir el número de series de datos que se deben mostrar en el gráfico. | NUMBER | 8 | N | N |
NumberOfStacks | Permite definir el número de pilas de series de datos que se deben mostrar en el gráfico. | NUMBER | 0 | N | N |
NumberOfXLabels | Permite definir el número de rótulos en el eje X. | NUMBER | Automático | S | N |
NumberOfYaxes | Permite definir el número de ejes Y para mostrar en el gráfico. | NUMBER | 1 | N | N |
PointerType | Permite especificar el aspecto visual del puntero al pasar por encima del gráfico. Las directrices se pueden utilizar para realizar el seguimiento de un valor de datos relativo a un eje. Opciones: Ninguno, Estándar, Línea horizontal, Línea vertical, Cruz. | STRING | Estándar | S | N |
ReferecneLineNLabel | Permite definir el rótulo de texto de la línea de referencia. | STRING | S | S | S |
ReferecneLineNValue | Permite definir el valor numérico de la línea de referencia. | NUMBER | S | N | S |
ReferenceLineNAxis | Permite especificar el eje que se debe utilizar para la línea de referencia. | STRING | N | N | N |
ResetToDefaultValue | Permite restaurar los valores por defecto de las entradas de este widget. | Servicio | N/D | S | N |
ReverseXAxis | Permite mostrar los valores del eje X en orden inverso. | BOOLEAN | Falso | N | N |
ReverseYAxis | Permite invertir el orden de los valores del eje Y. | BOOLEAN | Falso | N | 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 |
SampleSize | Permite definir el número máximo de puntos de datos que se deben mostrar al visualizar conjuntos de datos de gran tamaño en el gráfico. Para desactivar el muestreo, defina esta propiedad en 0. | NUMBER | Automático | S | N |
SelectedData | Una infotable que contiene los datos seleccionados en el gráfico. | INFOTABLE | N/D | S | N |
SelectedSeriesChanged | Un evento que se activa cuando cambia la serie seleccionada. | Evento | N/D | S | N |
SelectionMode | Permite controlar el número de puntos de datos que un usuario puede seleccionar al mismo tiempo. Elija varios para permitir que un usuario seleccione más de un punto de datos. Opciones: Ninguno, Por defecto, Único, Varios. | STRING | Por defecto | S | N |
Series1MarkerShape | Permite definir la forma del marcador de los puntos de datos de la serie 1 en el gráfico. | STRING | Por defecto | N | N |
Series1MarkerSize | Permite definir el tamaño del marcador de la serie de datos 1. | NUMBER | 8 | S | N |
Series1Type | Permite definir el tipo de visualización que se utiliza para mostrar los datos de la serie de datos 1 en el gráfico. | STRING | Por defecto | N | N |
Series1ZAxis | Permite definir el orden de las series en el eje Z. Por defecto, todos los grupos se definen con el mismo valor del eje Z. Los grupos apilados se organizan en función del tipo de serie seguido de esta propiedad. | NUMBER | 0 | N | N |
SeriesClicked | Permite activar un evento cuando se pulsa en un punto de datos del gráfico. | Evento | N/D | S | N |
ShowChartBands | Permite realzar el espacio reservado en el gráfico para las categorías de barra. Cuando se define en verdadero, el área de cada categoría se sombrea con un color gris. | BOOLEAN | Falso | N | N |
ShowDataLoading | Permite mostrar un icono de giro al cargar los datos. | BOOLEAN | Verdadero | N | 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 | N |
ShowHorizontalAnchorPointControl | Permite añadir controles para ajustar el valor de anclaje del eje horizontal. Cuando se selecciona esta propiedad, las propiedades HorizontalIntervalAnchorPoint y HorizontalIntervalAnchorPointLabel aparecen en la lista de propiedades. | BOOLEAN | Falso | S | N |
ShowXAxis | Permite mostrar la regla del eje X. | BOOLEAN | Falso | S | N |
ShowYAxis | Permite mostrar la regla del eje Y. | 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 |
ShowZeroValueRuler | Permite mostrar la regla de valor cero. | BOOLEAN | Falso | S | N |
SparkView | Permite mostrar una vista simplificada de la visualización del gráfico. Active 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 | N |
TabSequence | El número de secuencia del widget al pulsar el tabulador. | NUMBER | 0 | N | N |
ValuesPosition | Permite definir la posición de los rótulos de valores de datos en relación con los puntos de datos. | STRING | Por encima de | N | N |
ValuesPositionBar | Permite definir la posición de los rótulos de valores de datos con relación a las barras del gráfico. | STRING | Fuera de la barra | N | N |
ValuesTooltip | STRING | S | S | ||
VerticalAxisMaxWidth | Permite definir un ancho máximo para el eje vertical. | NUMBER | 85 | S | N |
VerticalZoom | Permite ampliar o reducir el eje vertical. | BOOLEAN | Falso | S | N |
VerticalSliderZoom | Permite añadir un control de corredera para mostrar los datos entre un valor mínimo y uno máximo en el eje vertical. Cuando se selecciona esta propiedad, las propiedades VerticalZoomMaxLabel y VerticalZoomMinLabel aparecen en la lista de propiedades. | BOOLEAN | Falso | S | N |
VerticalZoomMaxLabel | Permite especificar el rótulo de texto para el valor máximo del control de zoom de corredera. | STRING | N/D | S | S |
VerticalZoomMinLabel | Permite especificar el rótulo de texto para el valor mínimo del control de zoom de corredera. | STRING | N/D | S | S |
Visible | Cuando se activa, el widget está visible en el mashup. | BOOLEAN | True | S | N |
XAxisField | Permite seleccionar el campo de infotable que contiene los datos del eje X. | INFOTABLE | N/D | N | N |
XAxisLabel | Permite especificar el rótulo de texto para el eje X. | STRING | [[XAxis]] | S | S |
XAxisLabelAlignment | Permite alinear el rótulo del eje X. | STRING | Izquierda | N | N |
XAxisType | Permite definir el tipo de formato de los valores del eje X. | STRING | Cadena | S | N |
YAxesMaxWidth | Permite definir un ancho máximo para el área de los ejes Y. Se muestra una barra de desplazamiento cuando el área supera el ancho máximo. | NUMBER | 1200 | S | N |
YAxisNFormat | Permite definir el formato para los valores N del eje Y. | STRING | 0000,0 | S | N |
YAxisNLabel | Permite especificar el rótulo de texto del eje Y N. | STRING | [[YAxis]] | S | S |
YAxisNLabelAlignment | Permite alinear el rótulo del eje Y N. | STRING | En medio | N | N |
YAxisNMaximumValue | Permite definir el valor máximo del rango del eje Y. Por defecto, el rango se calcula automáticamente en función de los datos del widget. | NUMBER | Automático | S | N |
YAxisNMinimumValue | Permite definir el valor mínimo del rango del eje Y. Por defecto, el rango se calcula automáticamente en función de los datos del widget. | NUMBER | Automático | S | N |
YAxisNNumberOfLabels | Permite definir el número de rótulos del eje Y N. | NUMBER | Automático | S | N |
YAxisNPosition | Permite especificar la posición del eje Y. Cuando se define en Automático, el primer eje Y se muestra como principal y el resto como secundario. | STRING | Automático | N | N |
ZeroValueRuler | Permite controlar la visibilidad de las reglas de valor cero en el gráfico. Solo se puede mostrar la regla para el eje Y principal o secundario. Opciones: Eje principal, Eje secundario, Ninguno, Ambos. | STRING | Ninguno | S | N |