Minigráfico Angular

    La Ignite UI for Angular Sparkline es un control de gráficos liviano. Está pensado para renderizar dentro de un diseño de pequeña escala, como dentro de una celda de cuadrícula, pero también se puede renderizar solo. Sparkline tiene varios elementos visuales y características correspondientes que se pueden configurar y personalizar, como el tipo de gráfico, marcadores, rangos, líneas de tendencia, trazado de valores desconocidos e información sobre herramientas.

    Angular Sparkline Example

    El siguiente ejemplo muestra todos los diferentes tipos de Sparkline disponibles. El tipo se define estableciendo la propiedad displayType. Si no se especifica la propiedad displayType, de forma predeterminada se muestra el tipo de Line.

    ¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Sparkline Recommendations

    Is the Sparkline chart right for your project?

    El principal beneficio del control Sparkline en comparación con otros controles de gráficos es que puede representar en un espacio limitado, como una celda de cuadrícula, con todos sus elementos visuales mostrados.

    Angular Sparkline tiene la capacidad de marcar los puntos de datos con íconos elípticos para indicar los valores más alto, más bajo, primero, último y negativo. Los marcadores se pueden personalizar con la forma, el color o la imagen que desee.

    Sparkline Use Cases

    • Tiene un espacio compacto para mostrar un gráfico.
    • Quiere mostrar tendencias en una serie de valores, como los ingresos semanales.

    Sparkline Best Practices

    • Inicie siempre el eje Y (eje izquierdo o derecho) en 0 para que la comparación de datos sea precisa.
    • Ordene los datos de series temporales de izquierda a derecha.
    • Utilice atributos visuales como líneas sólidas para mostrar una serie de datos.

    When Not to Use Sparkline

    • Es necesario analizar los datos en detalle.
    • Debe mostrar cada etiqueta de los puntos de datos. Sólo permite mostrar valores altos y bajos en el Eje Y, y el primer y último valor en el Eje X.

    Sparkline Data Structure

    • Requiere datos unidimensionales.
    • El conjunto de datos debe contener al menos dos campos numéricos.
    • El texto en los campos de la fuente de datos se puede utilizar para mostrar la primera y la última etiqueta en el eje X.

    Sparkline Types

    Angular Sparkline admite los siguientes tipos de minigráficos configurando la propiedad displayType en consecuencia:

    • Line: muestra el tipo de gráfico de líneas Sparkline con datos numéricos, conectando los puntos de datos con segmentos de línea. Se deben proporcionar al menos dos puntos de datos para visualizar los datos en Sparkline.
    • Area: muestra el tipo de gráfico de área de minigráfico con datos numéricos. Esto es como un tipo de línea con pasos adicionales para cerrar el área después de dibujar cada línea. Se deben proporcionar al menos dos puntos de datos para visualizar los datos en Sparkline.
    • Column: muestra el tipo de gráfico de columnas de minigráfico con datos numéricos. Algunos pueden referirse a ellas como barras verticales. Este tipo puede representar un único punto de datos, pero requeriría especificar la propiedad de rango de valor mínimo (mínimo) en Sparkline para que el único punto de datos proporcionado pueda ser visible; de lo contrario, el valor se tratará como el valor mínimo y no será visible.
    • WinLoss: este tipo es similar en su apariencia visual al tipo de gráfico de columnas, en el que el valor de cada columna es igual al máximo positivo (para valores positivos) o al mínimo negativo (para valores negativos) del conjunto de datos. La idea es indicar un escenario de ganancia o pérdida. Para que el gráfico de ganancias/pérdidas se muestre correctamente, el conjunto de datos debe tener valores tanto positivos como negativos. Si el minigráfico WinLoss está vinculado a los mismos datos que los otros tipos, como el tipo Línea, que se puede vincular a una colección de valores numéricos, entonces el minigráfico Angular seleccionará dos valores de la colección, el más alto y el más bajo, y representará el minigráfico en función de esos valores.

    Markers

    Angular Sparkline le permite mostrar marcadores como iconos de colores circulares en su serie para indicar los puntos de datos individuales en función de las coordenadas X/Y. Los marcadores se pueden establecer en minigráficos de tipos de visualización de Line, Area y Column. El tipo de minigráfico WinLoss actualmente no acepta marcadores. De forma predeterminada, los marcadores no se muestran, pero se pueden habilitar configurando la propiedad de visibilidad del marcador correspondiente.

    Los marcadores en el minigráfico se pueden colocar en cualquier combinación de las siguientes ubicaciones:

    • All: muestra marcadores para todos los puntos de datos en el minigráfico.
    • Low: muestra marcadores en el punto de datos del valor más bajo. Si hay varios puntos en el valor más bajo, se mostrará en cada punto con ese valor.
    • High: muestra marcadores en el punto de datos del valor más alto. Si hay varios puntos con el valor más alto, se mostrará en cada punto con ese valor.
    • First: muestra un marcador en el primer punto de datos del minigráfico.
    • Last: muestra un marcador en el último punto de datos del minigráfico.
    • Negative: muestra marcadores en los puntos de datos negativos trazados en el minigráfico.

    Todos los marcadores mencionados anteriormente se pueden personalizar utilizando la propiedad del tipo de marcador relacionado en aspectos de color, visibilidad y tamaño. Por ejemplo, los marcadores Low anteriores tendrán propiedades lowMarkerBrush, lowMarkerVisibility y lowMarkerSize.

    Normal Range

    La característica de rango normal de Angular Sparkline es una franja horizontal que representa un rango significativo predefinido cuando se visualizan los datos. El rango normal se puede configurar como un área sombreada delineada con el color deseado.

    El rango normal puede ser más amplio que el punto de datos máximo o más, y también puede ser tan delgado como el tipo de visualización Line del minigráfico, para que sirva como indicador de umbral, por ejemplo. El ancho del rango normal está determinado por las tres propiedades siguientes, que sirven como configuración mínima requerida para mostrar el rango normal:

    De forma predeterminada, no se muestra el rango normal. Cuando está habilitado, el rango normal aparece con una apariencia de color gris claro, que también se puede configurar usando la propiedad normalRangeFill.

    También puede configurar si desea mostrar el rango normal delante o detrás de la serie trazada en su Angular Sparkline configurando la propiedad displayNormalRangeInFront.

    Trendlines

    Angular Sparkline admite una variedad de líneas de tendencia que se muestran como otra capa encima de la capa de minigráfico real. Para mostrar un minigráfico, puede utilizar la propiedad trendLineType.

    Las líneas de tendencia se calculan según el algoritmo especificado por la propiedad trendLineType utilizando los valores de los datos a los que está vinculado el gráfico.

    Las líneas de tendencia solo se pueden mostrar una a la vez y, de forma predeterminada, no se muestra la línea de tendencia.

    El siguiente ejemplo muestra todas las líneas de tendencia disponibles a través del menú desplegable:

    Unknown Value Interpolation

    Angular Sparkline puede detectar valores desconocidos y representar el espacio para valores desconocidos a través de un algoritmo de interpolación específico. Si sus datos contienen valores nulos y no utiliza esta función, es decir, no se especifica ninguna interpolación, el valor desconocido no se trazará.

    Para trazar los valores desconocidos, puede establecer la propiedad unknownValuePlotting del Angular Sparkline. El siguiente ejemplo muestra las diferencias entre los valores de la propiedad unknownValuePlotting, lo que le permite activarla o desactivarla mediante una casilla de verificación:

    Sparkline in Data Grid

    Puede incrustar Angular Sparkline en una columna de plantilla de cuadrícula de datos u otros controles de UI que admitan plantillas. El siguiente ejemplo de código muestra cómo hacer esto:

    Additional Resources

    Puede encontrar más información sobre tipos de gráficos relacionados en estos temas:

    API References

    La siguiente es una lista de miembros de API mencionados en las secciones anteriores: