Web Components Gráfico de áreas

    El Gráfico de áreas Ignite UI for Web Components se representa como una colección de puntos conectados por segmentos de línea recta con el área debajo de la línea rellena. Los valores se representan en el eje y (etiquetas en el lado izquierdo) y las categorías se muestran en el eje x. -eje (etiquetas inferiores). Este gráfico enfatiza la cantidad de cambio durante un período de tiempo o compara varios elementos, así como la relación de las partes de un todo, mostrando el total de los valores trazados. Por lo tanto, suelen ser cronológicos y muestran un cambio de cantidad, por ejemplo, la acumulación de un bien a lo largo del tiempo.

    Web Components Area Chart Example

    Puede crear Gráfico de áreas de categorías Web Components en el control IgcCategoryChartComponent vinculando sus datos a la propiedad ItemsSource y configurando la propiedad chartType en la enumeración Área, como se muestra en el siguiente ejemplo.

    Area Chart Recommendations

    Area Chart Use Cases

    Existen varios casos de uso comunes para elegir un Gráfico de áreas:

    • Tenga un conjunto de datos grande y de gran volumen que se adapte bien a las interacciones de los gráficos, como panorámica, zoom y profundización.
    • Necesita comparar las tendencias de sus datos a lo largo del tiempo.
    • Quiere mostrar la diferencia entre 2 o más series de datos.
    • Quiere mostrar comparaciones acumulativas de parte y todo de distintas categorías.
    • Necesidad de mostrar tendencias de datos para una o más categorías para el análisis comparativo.
    • Necesidad de visualizar datos detallados de series de tiempo.

    Area Chart 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 colores transparentes para garantizar que los datos trazados detrás de otra serie no se bloqueen.

    When Not to Use Area Charts

    • Tienes muchas (más de 7 o 10) series de datos. Su objetivo es garantizar que el gráfico sea legible.
    • Los datos de series de tiempo tienen valores similares (datos durante el mismo período). Esto hace que sea imposible diferenciar las áreas sombreadas superpuestas.

    Area Chart Data Structure

    • La fuente de datos debe ser una matriz o una lista de elementos de datos (para series únicas).
    • La fuente de datos debe ser una matriz de matrices o una lista de listas (para series múltiples).
    • La fuente de datos debe contener dos o más elementos de datos para poder representar una línea entre ellos.
    • Todos los elementos de datos deben contener al menos una columna de datos (cadena o fecha y hora).
    • Todos los elementos de datos deben contener al menos una columna de datos numéricos.

    Web Components Area Chart with Single Series

    Gráfico de áreas Web Components se utiliza a menudo para mostrar el cambio de valor a lo largo del tiempo, como la cantidad de electricidad renovable producida. Puede crear este tipo de gráfico en el control IgcCategoryChartComponent vinculando sus datos y configurando la propiedad chartType en el valor Area, como se muestra en el siguiente ejemplo.

    Web Components Area Chart with Multiple Series

    De manera similar a cómo puede mostrar múltiples Gráfico de líneas y gráficos de splines, también puede combinar múltiples gráficos de áreas en el mismo control. Esto se logra vinculando varias fuentes de datos a la propiedad ItemsSource del control IgcCategoryChartComponent.

    Web Components Area Chart Styling

    Los gráficos de áreas suelen tener un relleno semitransparente para sus áreas, líneas más gruesas y marcadores un poco más grandes de lo habitual. A continuación se muestra un ejemplo que muestra cómo puede diseñar el Gráfico de áreas anterior en consecuencia.

    Advanced Types of Area Charts

    Las siguientes secciones explican tipos más avanzados de gráficos de área Web Components que se pueden crear usando el control IgcDataChartComponent en lugar del control IgcCategoryChartComponent con API simplificada.

    Web Components Step Area Chart

    El Gráfico de áreas de pasos Web Components pertenece a un grupo de gráficos de categorías y se representa utilizando una colección de puntos conectados por líneas verticales y horizontales continuas con el área debajo de las líneas rellenas. Los valores se representan en el eje y y las categorías se muestran en el eje x. El gráfico de área de pasos enfatiza la cantidad de cambio durante un período de tiempo o compara varios elementos. Puede crear este tipo de gráfico en el control IgcCategoryChartComponent vinculando sus datos y configurando la propiedad chartType al valor StepArea, como se muestra en el siguiente ejemplo.

    Advanced Types of Area Charts

    Las siguientes secciones explican tipos más avanzados de gráficos de área Web Components que se pueden crear usando el control IgcDataChartComponent en lugar del control IgcCategoryChartComponent con API simplificada.

    Web Components Range Area Chart

    El Gráfico de áreas de rango Web Components le permite mostrar el área como un rango entre dos valores a lo largo del tiempo. Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a IgcRangeAreaSeriesComponent, como se muestra en el siguiente ejemplo.

    Web Components Stacked Area Chart

    Los caracteres del área apilada Web Components se representan utilizando una colección de puntos conectados por segmentos de línea, con el área debajo de la línea rellena y apilada una encima de la otra. Los gráficos de áreas apiladas siguen los mismos requisitos que los gráficos de áreas, con la única diferencia de que visualmente las áreas sombreadas están apiladas una encima de la otra. Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a IgcStackedAreaSeriesComponent, como se muestra en el siguiente ejemplo.

    Web Components Stacked 100% Area Chart

    El Gráfico de áreas 100 % apilada Web Components le permite representar sus datos como parte de un todo que cambia con el tiempo, por ejemplo, el consumo de energía de un país relacionado con las fuentes de las que se produce. En tales casos, representar todos los elementos apilados por igual puede ser una mejor idea. Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a IgcStacked100AreaSeriesComponent, como se muestra en el siguiente ejemplo.

    Web Components Stacked Spline Area Chart

    El Gráfico de áreas de spline apiladas Web Components se representa utilizando una colección de puntos conectados por segmentos de spline curvos, con el área debajo de la spline curva rellena y apilada una encima de la otra. Gráfico de áreas spline apiladas sigue los mismos requisitos que los gráficos de áreas, con la única diferencia de que las áreas visualmente sombreadas se apilan una encima de la otra. Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a IgcStackedSplineAreaSeriesComponent, como se muestra en el siguiente ejemplo.

    Web Components Stacked 100% Spline Area Chart

    El Gráfico de áreas spline apiladas al 100 % Web Components es idéntico al Gráfico de áreas spline apiladas en todos los aspectos excepto en el tratamiento de los valores en el eje y. En lugar de presentar una representación directa de los datos, el Gráfico de áreas spline apiladas al 100% presenta los datos en términos de un porcentaje de la suma de todos los valores en un punto de datos particular. A veces, el gráfico representa parte de un todo que ha cambiado con el tiempo. Por ejemplo, el consumo de energía de un país relacionado con las fuentes de donde se produce. En tales casos, representar todos los elementos apilados por igual puede ser una mejor idea. Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a IgcStacked100SplineAreaSeriesComponent, como se muestra en el siguiente ejemplo.

    Web Components Radial Area Chart

    El Gráfico de áreas radial Web Components pertenece a un grupo de gráficos radiales y tiene la forma de un polígono relleno que está delimitado por una colección de líneas rectas que conectan puntos de datos. Este tipo de gráfico utiliza el mismo concepto de trazado de datos que el Gráfico de áreas, pero envuelve los puntos de datos alrededor de un eje circular en lugar de estirarlos horizontalmente. Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a IgcRadialAreaSeriesComponent, como se muestra en el siguiente ejemplo.

    Web Components Polar Area Chart

    El Gráfico de áreas polar Web Components pertenece a un grupo de Gráfico polar y tiene la forma de un polígono relleno, donde los vértices o esquinas se ubican en las coordenadas polares (ángulo/radio) de los puntos de datos y están conectados por una línea recta y luego se rellenan. el área representada por los puntos conectados. El Gráfico de áreas polar utiliza los mismos conceptos de trazado de datos que el gráfico de marcadores de dispersión, pero en su lugar envuelve los puntos alrededor de un círculo y rellena el área dibujada, en lugar de estirar los puntos y el área rellenados a lo largo de una línea horizontal. Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a IgcPolarAreaSeriesComponent, como se muestra en el siguiente ejemplo.

    Web Components Polar Spline Area Chart

    El Gráfico de áreas de spline polar Web Components pertenece a un grupo de Gráfico polar y tiene la forma de un polígono relleno, donde los vértices o esquinas están ubicados en las coordenadas polares (ángulo/radio) de los puntos de datos y están conectados por una spline curva y luego llenando el área representada por los puntos conectados. El Gráfico de áreas spline polar utiliza los mismos conceptos de trazado de datos que el gráfico de marcadores de dispersión, pero en su lugar envuelve los puntos alrededor de un círculo y rellena el área dibujada, en lugar de estirar los puntos y el área rellena a lo largo de una línea horizontal. Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a IgcPolarSplineAreaSeriesComponent, como se muestra en el siguiente ejemplo.

    Additional Resources

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

    API References

    La siguiente tabla enumera los miembros de API mencionados en las secciones anteriores:

    Tipo de gráfico Nombre del control Miembros de la API
    Área IgcCategoryChartComponent chartType = Area
    Área de paso IgcCategoryChartComponent chartType = StepArea
    Área de rango IgcDataChartComponent IgcRangeAreaSeriesComponent
    Área Radial IgcDataChartComponent IgcRadialAreaSeriesComponent
    Área polar IgcDataChartComponent IgcPolarAreaSeriesComponent
    Área de spline polar IgcDataChartComponent IgcPolarSplineAreaSeriesComponent
    Área apilada IgcDataChartComponent IgcStackedAreaSeriesComponent
    Área de spline apilada IgcDataChartComponent IgcStackedSplineAreaSeriesComponent
    Área apilada 100% IgcDataChartComponent IgcStacked100AreaSeriesComponent
    Área apilada 100 % spline IgcDataChartComponent IgcStacked100SplineAreaSeriesComponent