Rendimiento de los gráficos de Angular

    Angular gráficos están optimizados para un alto rendimiento de representación de millones de puntos de datos y actualización cada pocos milisegundos. Sin embargo, hay varias características del gráfico que afectan al rendimiento del gráfico y se deben tener en cuenta al optimizar el rendimiento de la aplicación. Este tema le guiará para que Angular gráficos funcionen lo más rápido posible en su aplicación.

    Ejemplos de rendimiento de gráficos de Angular

    En los ejemplos siguientes se muestran dos escenarios de alto rendimiento de gráficos de Angular.

    Gráfico de Angular con alta frecuencia

    En un escenario de alta frecuencia, los gráficos de Angular pueden representar elementos de datos que se actualizan en tiempo real o en intervalos de milisegundos especificados. No experimentará retrasos, ni parpadeos en la pantalla, ni retrasos visuales, incluso mientras interactúa con el gráfico en un dispositivo táctil. En el ejemplo siguiente se muestra el IgxCategoryChartComponent escenario de alta frecuencia.

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

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

    Gráfico de Angular con alto volumen

    En un escenario de gran volumen, los gráficos de Angular pueden representar 1 millón de puntos de datos, mientras que el gráfico sigue proporcionando un rendimiento fluido cuando los usuarios finales intentan acercar o alejar o navegar por el contenido del gráfico. En el ejemplo siguiente se muestra el IgxCategoryChartComponent escenario de alto volumen.

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Pautas generales de desempeño

    En esta sección se enumeran las directrices y las características del gráfico que se suman a la sobrecarga y al procesamiento de las actualizaciones en los gráficos Angular.

    Tamaño de datos

    Si necesita trazar fuentes de datos con un gran número de puntos de datos (por ejemplo, 10,000+), le recomendamos que utilice Angular IgxDataChartComponent con uno de los siguientes tipos de series que fueron diseñadas especialmente para ese propósito.

    Estructura de datos

    Aunque Angular gráficos admiten la representación de varios orígenes de datos mediante el enlace de matrices de matrices de puntos de datos a la ItemsSource propiedad. Es mucho más rápido para los gráficos si varias fuentes de datos se acoplan en una sola fuente de datos donde cada elemento de datos contiene varias columnas de datos en lugar de solo una columna de datos. Por ejemplo:

    this.CategoryChart.dataSource = FlattenDataSource.create();
    this.FinancialChart.dataSource = FlattenDataSource.create();
    
    export class FlattenDataSource {
        public static create(): any[] {
            const data: any[] = [];
            data.push({ "Year": "1996", "USA": 148, "CHN": 110 });
            data.push({ "Year": "2000", "USA": 142, "CHN": 115 });
            return data;
        }
    }
    // instead of this data structure:
    export class MultiDataSources {
        public static create(): any[] {
            const dataSource1: any[] = [];
            dataSource1.push({ "Year": "1996", "Value": 148 });
            dataSource1.push({ "Year": "2000", "Value": 142 });
            const dataSource2: any[] = [];
            dataSource2.push({ "Year": "1996", "Value": 110 });
            dataSource2.push({ "Year": "2000", "Value": 115 });
            const multipleSources: any[] = [dataSource1, dataSource2];
            return multipleSources;
        }
    }
    ts

    Filtrado de datos

    IgxCategoryChartComponent Angular y los IgxFinancialChartComponent controles tienen un adaptador de datos integrado que analiza sus datos y genera series de gráficos para usted. Sin embargo, funciona más rápido si usa includedProperties y excludedProperties para filtrar solo las columnas de datos que realmente desea representar. Por ejemplo

    this.Chart.includedProperties = [ "Year", "USA", "RUS" ];
    this.Chart.excludedProperties = [ "CHN",  "FRN", "GER" ];
    ts
    App Builder | CTA Banner

    Directrices de rendimiento del gráfico

    Tipos de gráficos

    Los tipos de gráficos más simples, como Gráfico de líneas tienen un rendimiento más rápido que el uso de Gráfico Spline debido a la compleja interpolación de líneas spline entre puntos de datos. Por lo tanto, debe usar chartType la propiedad de Angular IgxCategoryChartComponent o el control para seleccionar el IgxFinancialChartComponent tipo de gráfico que se representa más rápido. Como alternativa, puede cambiar un tipo de serie a una serie más rápida en Angular IgxDataChartComponent control.

    La siguiente tabla enumera los tipos de gráficos en orden desde el rendimiento más rápido hasta el rendimiento más lento en cada grupo de gráficos:

    Grupo de gráficos Tipo de gráfico
    Gráficos circulares -Gráfico circular
    -Gráfico de anillos
    -Gráfico circular circular radial
    Gráficos de líneas -Gráfico de líneas de categorías
    -Gráfico de spline de categorías
    -Gráfico de líneas de pasos
    -Gráfico de líneas radiales
    -Gráfico de líneas polares
    -Gráfico de líneas de dispersión
    -Gráfico de polilíneas de dispersión (*)
    -Gráfico de contorno de dispersión
    -Gráfico de líneas apiladas
    -Gráfico de líneas apiladas 100%
    Gráficos de área -Gráfico de áreas de categorías
    -Gráfico de áreas de paso
    -Gráfico de áreas de rango
    -Gráfico de áreas radial
    -Gráfico de áreas polar
    -Gráfico de polígonos de dispersión (*)
    -Gráfico de áreas de dispersión
    -Gráfico de áreas apiladas
    -Gráfico de áreas apilada 100%
    Gráficos de columnas -Gráfico de columnas
    -Gráfico de barras
    -Gráfico de cascada
    -Gráfico de columnas de rango
    -Gráfico de columnas radiales
    -Gráfico de columnas apiladas
    -Gráfico de barras apiladas
    -Gráfico de columnas apiladas al 100%
    -Gráfico de barras apiladas 100%
    Gráficos de spline -Gráfico de spline de categorías
    -Gráfico de splines polares
    -Gráfico de splines de dispersión
    -Gráfico de splines apilados
    -Gráfico spline apilado al 100%
    Gráficos de puntos -Gráfico de puntos de categoría
    -Gráfico de dispersión HD
    -Gráfico de marcadores de dispersión
    -Gráfico de burbujas de dispersión
    -Gráfico de marcadores polares
    Gráficos financieros -Gráfico de acciones en modo línea
    -Gráfico de acciones en modo columna
    -Gráfico de acciones en modo de barras
    -Gráfico de acciones en modo vela
    -Gráfico de cotizaciones con superposiciones
    -Gráfico de cotizaciones con panel de zoom
    -Gráfico de acciones con panel de volumen
    -Gráfico de acciones con panel indicador
    Gráficos de dispersión -Gráfico de dispersión HD
    -Gráfico de marcadores de dispersión
    -Gráfico de líneas de dispersión
    -Gráfico de burbujas de dispersión
    -Gráfico de splines de dispersión
    -Gráfico de áreas de dispersión
    -Gráfico de contorno de dispersión
    -Gráfico de polilíneas de dispersión (*)
    -Gráfico de polígonos de dispersión (*)
    Cartas radiales -Gráfico de líneas radiales
    -Gráfico de áreas radial
    -Gráfico circular circular radial
    -Gráfico de columnas radiales
    Cartas polares -Gráfico de marcadores polares
    -Gráfico de líneas polares
    -Gráfico de áreas polar
    -Gráfico de splines polares
    -Gráfico de áreas de spline polar
    Gráficos apilados -Gráfico de líneas apiladas
    -Gráfico de áreas apiladas
    -Gráfico de columnas apiladas
    -Gráfico de barras apiladas
    -Gráfico de splines apilados
    -Gráfico de líneas apiladas 100%
    -Gráfico de áreas apilada 100%
    -Gráfico de columnas apiladas al 100%
    -Gráfico de barras apiladas 100%
    -Gráfico spline apilado al 100%

    * Tenga en cuenta que el gráfico de polígonos de dispersión y el gráfico de polilíneas de dispersión tienen un mejor rendimiento que el resto de gráficos si tiene muchas fuentes de datos vinculadas al gráfico. Para obtener más información, consulte la sección Colección de series. De lo contrario, otros tipos de gráficos son más rápidos.

    Animaciones de gráficos

    La habilitación de las animaciones de gráficos retrasará ligeramente la serie de representación final en los gráficos de Angular mientras se reproducen las animaciones de transición.

    Anotaciones de gráfico

    La habilitación de anotaciones de gráfico, como las anotaciones de llamada, las anotaciones en cruz o las anotaciones de valor final, disminuirá ligeramente el rendimiento del gráfico de Angular.

    Resaltado de gráfico

    Habilitar el resaltado del gráfico disminuirá ligeramente el rendimiento del gráfico Angular.

    Leyenda del gráfico

    Agregar una leyenda a los gráficos de Angular puede disminuir el rendimiento si los títulos de las series o los elementos de datos asignados a la leyenda cambian a menudo en tiempo de ejecución.

    Marcadores de gráfico

    En Angular gráficos, los marcadores son especialmente costosos cuando se trata del rendimiento del gráfico porque aumentan la complejidad del diseño del gráfico y realizan el enlace de datos para obtener cierta información. Además, los marcadores disminuyen el rendimiento cuando hay muchos puntos de datos o si hay muchos orígenes de datos enlazados. Por lo tanto, si los marcadores no son necesarios, deben eliminarse del gráfico.

    Este fragmento de código muestra cómo eliminar marcadores de los gráficos de Angular.

    // on CategoryChart or FinancialChart
    this.Chart.markerTypes.clear();
    this.Chart.markerTypes.add(MarkerType.None);
    
    // on LineSeries of DataChart
    this.LineSeries.markerType = MarkerType.None;
    ts

    Resolución del gráfico

    Establecer la propiedad resolution en un valor más alto mejorará el rendimiento, pero reducirá la fidelidad gráfica de las líneas de las series trazadas. Como tal, se puede aumentar hasta que la fidelidad sea inaceptable.

    Este fragmento de código muestra cómo disminuir la resolución en los gráficos Angular.

    // on CategoryChart or FinancialChart:
    this.Chart.Resolution = 10;
    
    // on LineSeries of DataChart:
    this.LineSeries.Resolution = 10;
    ts

    Superposiciones de gráficos

    La habilitación de las superposiciones de gráficos disminuirá ligeramente el rendimiento del gráfico Angular.

    Líneas de tendencia del gráfico

    La habilitación de las líneas de tendencia del gráfico disminuirá ligeramente el rendimiento del gráfico Angular.

    Tipos de eje

    No se recomienda el uso del eje x con soporte DateTime si los espacios entre puntos de datos, según la cantidad de tiempo entre ellos, no son importantes. En su lugar, se debe utilizar el eje ordinal/categoría porque es más eficiente en la forma en que fusiona los datos. Además, el eje ordinal/categoría no realiza ninguna clasificación de los datos como lo hace el eje x basado en el tiempo.

    IgxCategoryChartComponent ya utiliza el eje ordinal/categoría, por lo que no es necesario cambiar sus propiedades.

    Este fragmento de código muestra cómo ordinal/categoría el eje x en los controles IgxFinancialChartComponent e IgxDataChartComponent.

    <igx-financial-chart xAxisMode="Ordinal"></igx-financial-chart>
    
    <igx-data-chart>
        <igx-category-x-axis label="Time"></igx-category-x-axis>
    </igx-data-chart>
    html

    Intervalos de eje

    De forma predeterminada, Angular gráficos se calcularán yAxisInterval automáticamente en función del rango de sus datos. Por lo tanto, debe evitar establecer el intervalo de eje, especialmente en un valor pequeño, para evitar la representación de demasiadas líneas de cuadrícula de ejes y etiquetas de ejes. Además, es posible que desee considerar la posibilidad de aumentar yAxisInterval la propiedad a un valor mayor que el intervalo de eje calculado automáticamente si no necesita muchas líneas de cuadrícula de eje o etiquetas de eje.

    No recomendamos configurar el intervalo menor del eje, ya que disminuirá el rendimiento del gráfico.

    Este fragmento de código muestra cómo establecer el intervalo principal del eje en los gráficos Angular.

    <igx-category-chart xAxisInterval="5" yAxisInterval="50"></igx-category-chart>
    
    <igx-financial-chart xAxisInterval="5" yAxisInterval="50"></igx-financial-chart>
    
    <igx-data-chart>
        <igx-category-x-axis name="xAxis" interval="5"></igx-category-x-axis>
        <igx-numeric-y-axis name="yAxis" interval="50"></igx-numeric-y-axis>
    </igx-data-chart>
    html

    Escala de eje

    Se recomienda establecer la propiedad yAxisIsLogarithmic en false para obtener un mayor rendimiento, ya que se necesitan menos operaciones que calcular el rango de ejes y los valores de las etiquetas de los ejes en escala logarítmica.

    Visibilidad de etiquetas de eje

    De la misma manera que los marcadores, las etiquetas de los ejes también son costosas porque utilizan plantillas y enlaces, y es posible que su contexto de datos cambie con frecuencia. Si no se utilizan etiquetas, se deben ocultar o se debe aumentar su intervalo para disminuir el número de etiquetas de eje.

    Este fragmento de código muestra cómo ocultar las etiquetas de los ejes en los gráficos de Angular.

    <igx-category-chart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed">
    </igx-category-chart>
    
    <igx-financial-chart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed">
    </igx-financial-chart>
    
    <igx-data-chart>
        <igx-category-x-axis name="xAxis" labelVisibility="Collapsed"></igx-category-x-axis>
        <igx-numeric-y-axis name="yAxis" labelVisibility="Collapsed"></igx-numeric-y-axis>
    </igx-data-chart>
    html

    Abreviatura de etiquetas de eje

    Sin embargo, los gráficos de Angular admiten la abreviatura de números grandes (por ejemplo, 10,000+) que se muestran en las etiquetas de los ejes cuando yAxisAbbreviateLargeNumbers se establece en true. En su lugar, se recomienda preprocesar valores grandes en los elementos de datos dividiéndolos como un factor común y, a continuación, estableciéndolos yAxisTitle en una cadena que represente el factor utilizado para abreviar los valores de datos.

    Este fragmento de código muestra cómo establecer el título del eje en los gráficos Angular.

    <igx-category-chart yAxisTitle="In millions of Dollars"></igx-category-chart>
    
    <igx-financial-chart yAxisTitle="In millions of Dollars"></igx-financial-chart>
    
    <igx-data-chart>
        <igx-numeric-y-axis title="In millions of Dollars"></igx-numeric-y-axis>
    </igx-data-chart>
    html

    Extensión de etiquetas de eje

    En tiempo de ejecución, los gráficos de Angular ajustan la extensión de las etiquetas en el eje Y en función de una etiqueta con el valor más largo. Esto podría disminuir el rendimiento del gráfico si el rango de datos cambia y las etiquetas deben actualizarse con frecuencia. Por lo tanto, se recomienda establecer la extensión de la etiqueta en tiempo de diseño para mejorar el rendimiento del gráfico.

    En el siguiente fragmento de código se muestra cómo establecer una extensión fija para las etiquetas en el eje Y en los gráficos Angular.

    <igx-category-chart xAxisLabelExtent="50" yAxisLabelExtent="50"></igx-category-chart>
    
    <igx-financial-chart xAxisLabelExtent="50" yAxisLabelExtent="50"></igx-financial-chart>
    
    <igx-data-chart>
        <igx-category-x-axis name="xAxis" labelExtent="50"></igx-category-x-axis>
        <igx-numeric-y-axis name="yAxis" labelExtent="50"></igx-numeric-y-axis>
    </igx-data-chart>
    html

    Eje Otras imágenes

    La habilitación de objetos visuales de eje adicionales (por ejemplo, los títulos de los ejes) o el cambio de sus valores predeterminados puede disminuir el rendimiento en los gráficos de Angular.

    Por ejemplo, cambiando estas propiedades en el control IgxCategoryChartComponent o IgxFinancialChartComponent:

    O cambiando las propiedades de un IgxAxisComponent en el control IgxDataChartComponent:

    eje visual Propiedades del eje
    Todas las imágenes del eje Interval, MinorInterval
    Marcas de eje TickStroke , TickStrokeThickness, TickLength
    Líneas de cuadrícula principales del eje MajorStroke, MajorStrokeThickness
    Líneas de cuadrícula del eje menor MinorStroke, MinorStrokeThickness
    Línea principal del eje Stroke, StrokeThickness
    Títulos de eje chartTitle, TitleAngle
    Tiras de eje Strip

    Desempeño en Gráfico financiero

    Además de las directrices de rendimiento anteriores, el control Angular IgxFinancialChartComponent tiene las siguientes características únicas que afectan al rendimiento.

    Modo de eje Y

    Se recomienda configurar la opción yAxisMode en Numeric para obtener un mayor rendimiento, ya que se necesitan menos operaciones que usar el modo PercentChange.

    Paneles de gráficos

    Configurar muchos paneles usando las opciones indicatorTypes y overlayTypes puede disminuir el rendimiento y se recomienda utilizar algunos indicadores financieros y una superposición financiera.

    Control deslizante de zoom

    Establecer la opción en None mejorará el rendimiento del zoomSliderType gráfico y permitirá más espacio vertical para otros indicadores y el panel de volumen.

    Tipo de volumen

    Establecer la propiedad volumeType puede tener el siguiente impacto en el rendimiento del gráfico:

    • None- es el menos costoso ya que no muestra el panel de volumen.
    • Line- Es un tipo de volumen más caro de representar y se recomienda cuando se representan muchos puntos de datos o cuando se trazan muchas fuentes de datos.
    • Area- Es más caro de renderizar que el tipo de Line volumen.
    • Column- Es más caro de renderizar que el tipo de Area volumen y se recomienda cuando se renderizan datos de volumen de 1 a 3 acciones.

    Rendimiento en Gráfico de datos

    Además de las directrices generales de rendimiento, el control Angular IgxDataChartComponent tiene las siguientes características únicas que afectan al rendimiento.

    Colección de ejes

    Agregar demasiados ejes a la colección Axes del control IgxDataChartComponent disminuirá el rendimiento del gráfico y recomendamos compartir ejes entre series.

    Colección de series

    Además, agregar una gran cantidad de series a la colección del control Angular IgxDataChartComponent agregará sobrecarga a la IgxSeriesComponent representación, ya que cada serie tiene su propio lienzo de representación. Esto es especialmente importante si tiene más de 10 series en el Gráfico de datos. Se recomienda combinar varias fuentes de datos en una fuente de datos plana (consulte la sección Estructura de datos) y, a continuación, utilizar la función de estilo condicional de la siguiente serie:

    Recursos adicionales

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

    Referencias de API

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