Web Components Línea de cálculo

    El Ignite UI for Web Components Sparkline es un control ligero para gráficos. Está pensado para renderizar dentro de un diseño a pequeña escala, como dentro de una celda de cuadra, pero también puede renderizarse de forma independiente. CuentaSparkline con varios elementos visuales y características correspondientes que pueden configurarse y personalizarse, como el tipo de gráfico, marcadores, rangos, líneas de tendencia, gráficos de valores desconocidos y descripciones emergentes.

    Web Components Sparkline Example

    El siguiente ejemplo muestra todos los diferentes tipos disponiblesSparkline. El tipo se define estableciendo ladisplayType propiedad. Si ladisplayType propiedad no se especifica, por defecto se muestra elLine tipo.

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Web Components completo 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.

    El Web Components minigráfico tiene la capacidad de marcar los puntos de datos con iconos elípticos para indicar los valores más altos, más bajos, primeros, últimos y negativos. Los marcadores se pueden personalizar con la forma, el color o la imagen que se 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

    La línea de chispas Web Components admite los siguientes tipos de líneas de chispa configurando ladisplayType propiedad en consecuencia:

    • Line: Muestra el tipo de gráfico lineal de 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 Sparkline con datos numéricos. Esto es similar al tipo de línea con pasos adicionales de cierre del á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 tabla de columnas de Sparkline con datos numéricos. Algunos pueden referirse a ello como barras verticales. Este tipo puede renderizar un único punto de datos, pero requeriría especificar la propiedad del rango mínimo de valor (mínimo) en Sparkline para que el único punto de datos proporcionado sea visible; de lo contrario, el valor se tratará como el valor mínimo y no será visible.
    • WinLossEste tipo es similar en su apariencia visual al tipo de diagrama 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 victoria o derrota. Para que el gráfico de Victorias/Pérdidas se muestre correctamente, el conjunto de datos debe tener valores tanto positivos como negativos. Si la línea de chispa WinLoss está vinculada a los mismos datos que los otros tipos, como el tipo de línea, que puede vincularse a una colección de valores numéricos, entonces la línea de chispa Web Components seleccionará dos valores de la colección: el más alto y el más bajo, y renderizará la línea de chispa en función de esos valores.

    Markers

    La Web Components Sparkline te permite mostrar marcadores como iconos circulares de colores en tu serie para indicar los puntos de datos individuales según las coordenadas X/Y. Los marcadores pueden colocarse en líneas de chispa de tipos de pantalla,Line​Area yColumn. ElWinLoss tipo de línea de chispa actualmente no acepta rotuladores. Por defecto, los marcadores no se muestran, pero pueden activarse estableciendo la propiedad correspondiente de visibilidad del marcador.

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

    • All: Mostrar marcadores para todos los puntos de datos en la línea de chispa.
    • Low: Mostrar 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: Mostrar marcadores en el punto de datos de mayor valor. Si hay varios puntos en el valor más alto, se mostrará en cada punto con ese valor.
    • First: Mostrar un marcador en el primer punto de datos de la línea de chispa.
    • Last: Mostrar un marcador en el último punto de datos de la línea de chispa.
    • Negative: Mostrar marcadores en los puntos de datos negativos representados en la línea de chispa.

    Todos los marcadores mencionados anteriormente pueden personalizarse usando la propiedad del tipo de marcador relacionado en aspectos de color, visibilidad y tamaño. Por ejemplo, losLow marcadores anteriores tendrán propiedadeslowMarkerBrush,lowMarkerVisibility, ylowMarkerSize.

    Normal Range

    La característica de rango normal del minigráfico Web Components es una franja horizontal que representa un rango significativo predefinido cuando se visualizan los datos. El rango normal se puede establecer como un área sombreada delineada con el color deseado.

    El rango normal puede ser más amplio que el punto máximo de datos o más, y también puede ser tan fino como el tipo de visualización deLine la línea de chispa, sirviendo como indicador umbral, por ejemplo. El ancho del rango normal está determinado por las siguientes tres propiedades, que sirven como los ajustes mínimos necesarios para mostrar el rango normal:

    Por defecto, el rango normal no se muestra. Cuando está activado, el rango normal aparece con un aspecto de color gris claro, que también puede configurarse usando estanormalRangeFill propiedad.

    También puedes configurar si mostrar el rango normal delante o detrás de la serie trazada en tu Web Components Sparkline configurando ladisplayNormalRangeInFront propiedad.

    Trendlines

    La Web Components Sparkline soporta una variedad de líneas de tendencia que se muestran como otra capa encima de la capa real de la línea de chispa. Para mostrar una línea de chispa, puedes usar latrendLineType propiedad.

    Las líneas de tendencia se calculan según el algoritmo especificado por latrendLineType propiedad 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

    El Web Components minigráfico puede detectar valores desconocidos y representar el espacio para valores desconocidos a través de un algoritmo de interpolación especificado. Si los datos contienen valores nulos y no utiliza esta característica, lo que significa que no se especifica ninguna interpolación, el valor desconocido no se trazará.

    Para representar los valores desconocidos, puedes establecer launknownValuePlotting propiedad de la Web Components Sparkline. El ejemplo siguiente muestra las diferencias entre los valores de launknownValuePlotting propiedad, permitiéndote activarla o desactivarla usando una casilla de verificación:

    Sparkline in Data Grid

    Puede incrustar el Web Components minigráfico en una columna de plantilla de la cuadrícula de datos u otros controles de interfaz de usuario que admitan plantillas. En el siguiente ejemplo de código se muestra cómo hacerlo:

    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: