Descripción general de gráficos y diagramas Blazor

Ignite UI for Blazor Charts & Graphs es una amplia biblioteca de visualizaciones de datos que permiten crear gráficos y paneles interactivos sorprendentes para sus aplicaciones web y móviles. Diseñado para la velocidad y la belleza, para funcionar en todos los navegadores modernos y con total interactividad y capacidad táctil, puede crear de manera rápida y sencilla elementos visuales responsivos para su próxima aplicación en cualquier dispositivo.

La Ignite UI for Blazor admite más de 65 tipos de series y combinaciones que le permiten visualizar cualquier tipo de datos, incluidas series de categorías, series financieras, series polares, series radiales, series de rango, series de dispersión, series de formas y series geoespaciales. Independientemente del tipo de comparación que esté haciendo o del tipo de historia de datos que esté intentando contar, puede representar sus datos de cualquiera de estas formas:

• Cambian con el tiempo
• Comparación
• Correlación
• Distribución
• geoespacial
• Resumen + Detalle
• Parte al Todo
• Clasificación

¡Potencia tus visualizaciones más exigentes con los gráficos Infragistics Blazor!

Blazor WebAssembly および Blazor Server 向けに最適化された 60 以上の高性能チャートを使用 とグラフを使用して、生データを魅力的な視覚化に変換し、最高の UX を実現します。

無料で試してみる

Blazor Tipos de tablas y gráficos

El producto Blazor tiene más de 65 tipos de gráficos diferentes para cualquier escenario, desde una única visualización de gráfico hasta un panel interactivo. Puede crear gráficos Blazor como circulares, de barras, de áreas, de líneas, de puntos, apilados, de anillos, de dispersión, de indicadores, polares, de árbol, de acciones, financieros, geoespaciales y más para sus aplicaciones móviles o web. La ventaja de nuestro gráfico Blazor frente a otros es la compatibilidad total con funciones como:

• Diseño web responsivo integrado
• Panorámica y zoom interactivos con mouse, teclado y toque
• Control total de la animación del gráfico
• Eventos detallados del gráfico
• Soporte de transmisión en tiempo real
• Soporte de alto volumen (millones de puntos de datos)
• Líneas de tendencias y otras funciones de análisis de datos

El gráfico Blazor, creado con un diseño modular de ejes, marcadores, series, leyendas y capas de anotaciones, facilita el diseño y la representación de cualquier tipo de historia de datos. Cree un gráfico simple con una sola serie de datos o cree historias de datos más complejas con varias series de datos, con varios ejes en vistas compuestas.

Categoría y gráfico financiero vs. gráfico de datos

El Gráfico financiero Blazor es lo que llamamos gráficos específicos de dominio. Es un envoltorio Gráfico de datos Blazor que asume que su dominio es una categoría o una serie de precios financieros.

La elección de estos gráficos de dominio específicos permite simplificar la API y dibujar una gran cantidad de interfaces sobre los datos para configurar automáticamente el escenario del gráfico, todo ello sin necesidad de definir explícitamente atributos como ejes, series y anotaciones. Por el contrario, el gráfico de datos es muy explícito y es necesario definir cada parte crítica del gráfico.

Los gráficos de dominio utilizan un gráfico de datos en su núcleo, por lo que las mismas optimizaciones de rendimiento se aplican a ambos. La diferencia radica en si intentan hacer que las cosas sean muy fáciles de especificar para el desarrollador o si buscan ser lo más flexibles posible. Blazor Gráfico de datos es más detallado y desbloquea todas las capacidades de gráficos que necesita, lo que le permite combinar cualquier cantidad de series, ejes o anotaciones, por ejemplo. En el caso de los gráficos de categorías y financieros, puede haber una situación que no se pueda realizar fácilmente y para la que el gráfico de datos sea más adecuado, como una serie con una serie de dispersión con un eje x numérico.

Puede resultar difícil saber qué gráfico elegir al principio. Es fundamental comprender el tipo de serie y cuántas características adicionales desea presentar. Para una categoría básica más liviana o una serie financiera, recomendamos utilizar uno de los gráficos de dominio. Para escenarios más avanzados, recomendamos utilizar Blazor Gráfico de datos, como presentar algo diferente a lo que cubre la propiedad ChartType del gráfico de categorías, como una serie apilada o dispersa, o datos numéricos o basados en el tiempo. Vale la pena señalar que Blazor Gráfico financiero cubre solo los tipos de series de columnas, barras OHLC, velas y líneas.

Hacemos que la categoría Blazor y Gráfico financiero sean más fáciles de usar. La buena noticia es que siempre puede cambiar al gráfico de datos en el futuro.

Blazor Gráfico de barras

El Blazor Gráfico de barras o gráfico de barras es uno de los tipos de gráficos de categorías más comunes que se utilizan para comparar rápidamente la frecuencia, el recuento, el total o el promedio de los datos de diferentes categorías con los datos codificados por barras horizontales de igual ancho y diferentes longitudes. Son ideales para mostrar las variaciones en el valor de un artículo a lo largo del tiempo, la distribución de datos, la clasificación de datos ordenados (de mayor a menor, de peor a mejor). Los datos se representan mediante una colección de rectángulos que se extienden de izquierda a derecha del gráfico hacia los valores de los puntos de datos. Más información sobre nuestro gráfico de barras

EXAMPLE

DATA

MODULES

RAZOR

CSS

using System;
using System.Collections.Generic;
public class HighestGrossingMoviesItem
{
    public string Franchise { get; set; }
    public double TotalRevenue { get; set; }
    public double HighestGrossing { get; set; }
}

public class HighestGrossingMovies
    : List<HighestGrossingMoviesItem>
{
    public HighestGrossingMovies()
    {
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Marvel Universe",
            TotalRevenue = 22.55,
            HighestGrossing = 2.8
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Star Wars",
            TotalRevenue = 10.32,
            HighestGrossing = 2.07
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Harry Potter",
            TotalRevenue = 9.19,
            HighestGrossing = 1.34
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Avengers",
            TotalRevenue = 7.76,
            HighestGrossing = 2.8
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Spider Man",
            TotalRevenue = 7.22,
            HighestGrossing = 1.28
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"James Bond",
            TotalRevenue = 7.12,
            HighestGrossing = 1.11
        });
    }
}csコピー

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbLegendModule),
                typeof(IgbDataChartCoreModule),
                typeof(IgbDataChartCategoryCoreModule),
                typeof(IgbDataChartCategoryModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbDataChartVerticalCategoryModule),
                typeof(IgbDataChartAnnotationModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Highest Grossing Movie Franchises
    </div>
    <div class="legend">
        <IgbLegend
        Name="legend"
        @ref="legend"
        Orientation="LegendOrientation.Horizontal">
        </IgbLegend>

    </div>
    <div class="container vertical fill">
        <IgbDataChart
        Name="Chart"
        @ref="chart">
            <IgbCategoryYAxis
            Name="yAxis"
            @ref="yAxis"
            Label="Franchise"
            UseEnhancedIntervalManagement="true"
            EnhancedIntervalPreferMoreCategoryLabels="true"
            DataSource="HighestGrossingMovies"
            IsInverted="true"
            Gap="0.5"
            Overlap="-0.1">
            </IgbCategoryYAxis>

            <IgbNumericXAxis
            Name="xAxis"
            @ref="xAxis"
            Title="Billions of U.S. Dollars">
            </IgbNumericXAxis>

            <IgbCategoryHighlightLayer
            Name="CategoryHighlightLayer"
            @ref="categoryHighlightLayer">
            </IgbCategoryHighlightLayer>

            <IgbBarSeries
            Name="BarSeries1"
            @ref="barSeries1"
            XAxisName="xAxis"
            YAxisName="yAxis"
            Title="Total Revenue of Franchise"
            ValueMemberPath="TotalRevenue"
            DataSource="HighestGrossingMovies"
            ShowDefaultTooltip="true"
            IsTransitionInEnabled="true"
            IsHighlightingEnabled="true">
            </IgbBarSeries>

            <IgbBarSeries
            Name="BarSeries2"
            @ref="barSeries2"
            XAxisName="xAxis"
            YAxisName="yAxis"
            Title="Highest Grossing Movie in Series"
            ValueMemberPath="HighestGrossing"
            DataSource="HighestGrossingMovies"
            ShowDefaultTooltip="true"
            IsTransitionInEnabled="true"
            IsHighlightingEnabled="true">
            </IgbBarSeries>

            <IgbDataToolTipLayer
            Name="Tooltips"
            @ref="tooltips">
            </IgbDataToolTipLayer>

        </IgbDataChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var legend = this.legend;
        var chart = this.chart;
        var yAxis = this.yAxis;
        var xAxis = this.xAxis;
        var categoryHighlightLayer = this.categoryHighlightLayer;
        var barSeries1 = this.barSeries1;
        var barSeries2 = this.barSeries2;
        var tooltips = this.tooltips;

        this.BindElements = () => {
            chart.Legend = this.legend;
        };
        this.BindElements();

    }

    private IgbLegend legend;
    private IgbDataChart chart;
    private IgbCategoryYAxis yAxis;
    private IgbNumericXAxis xAxis;
    private IgbCategoryHighlightLayer categoryHighlightLayer;
    private IgbBarSeries barSeries1;
    private IgbBarSeries barSeries2;
    private IgbDataToolTipLayer tooltips;

    private HighestGrossingMovies _highestGrossingMovies = null;
    public HighestGrossingMovies HighestGrossingMovies
    {
        get
        {
            if (_highestGrossingMovies == null)
            {
                _highestGrossingMovies = new HighestGrossingMovies();
            }
            return _highestGrossingMovies;
        }
    }

}razorコピー

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
cssコピー

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

Blazor Gráfico circular

El Blazor Gráfico circular, o gráfico circular, es un tipo de gráfico muy común de parte a todo. Los gráficos de parte a todo muestran cómo las categorías (partes) de un conjunto de datos se suman a un valor total (entero). Las categorías se muestran en proporción a otras categorías en función de su porcentaje de valor con respecto al valor total que se está analizando. Un gráfico circular representa los valores de datos como secciones en un gráfico circular o circular. Cada sección, o porción de pastel, tiene una longitud de arco proporcional a su valor de datos subyacente. Los valores totales representados por los segmentos de tarta representan un valor entero, como 100 o 100%. Los gráficos circulares son perfectos para conjuntos de datos pequeños y son fáciles de leer de un vistazo rápido. Más información sobre nuestro gráfico circular

EXAMPLE

DATA

MODULES

RAZOR

CSS

using System;
using System.Collections.Generic;
public class EnergyGlobalDemandItem
{
    public double Value { get; set; }
    public string Category { get; set; }
    public string Summary { get; set; }
}

public class EnergyGlobalDemand
    : List<EnergyGlobalDemandItem>
{
    public EnergyGlobalDemand()
    {
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 37,
            Category = @"Cooling",
            Summary = @"Cooling 37%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 25,
            Category = @"Residential",
            Summary = @"Residential 25%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 12,
            Category = @"Heating",
            Summary = @"Heating 12%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 11,
            Category = @"Lighting",
            Summary = @"Lighting 11%"
        });
        this.Add(new EnergyGlobalDemandItem()
        {
            Value = 15,
            Category = @"Other",
            Summary = @"Other 15%"
        });
    }
}csコピー

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbItemLegendModule),
                typeof(IgbPieChartModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Global Electricity Demand by Energy Use
    </div>
    <div class="legend">
        <IgbItemLegend
        Name="legend"
        @ref="legend"
        Orientation="LegendOrientation.Horizontal">
        </IgbItemLegend>

    </div>
    <div class="container vertical fill">
        <IgbPieChart
        Name="chart"
        @ref="chart"
        LegendLabelMemberPath="Category"
        LabelMemberPath="Summary"
        LabelsPosition="LabelsPosition.BestFit"
        ValueMemberPath="Value"
        RadiusFactor="0.7"
        DataSource="EnergyGlobalDemand">
        </IgbPieChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var legend = this.legend;
        var chart = this.chart;

        this.BindElements = () => {
            chart.Legend = this.legend;
        };
        this.BindElements();

    }

    private IgbItemLegend legend;
    private IgbPieChart chart;

    private EnergyGlobalDemand _energyGlobalDemand = null;
    public EnergyGlobalDemand EnergyGlobalDemand
    {
        get
        {
            if (_energyGlobalDemand == null)
            {
                _energyGlobalDemand = new EnergyGlobalDemand();
            }
            return _energyGlobalDemand;
        }
    }

}razorコピー

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
cssコピー

Blazor Gráfico de líneas

El Blazor Gráfico de líneas, o gráfico de líneas, es un tipo de gráfico de líneas de categoría que muestra los valores de datos continuos representados por puntos conectados por segmentos de línea recta de una o más cantidades durante un período de tiempo para mostrar tendencias y realizar análisis comparativos. El eje Y (etiquetas en el lado izquierdo) muestra un valor numérico, mientras que el eje X (etiquetas inferiores) muestra una serie temporal o una categoría de comparación. Puede incluir uno o más conjuntos de datos para comparar, que se representarían como varias líneas en el gráfico. Más información sobre nuestro gráfico de líneas

EXAMPLE

DATA

MODULES

RAZOR

CSS

using System;
using System.Collections.Generic;
public class CountryRenewableElectricityItem
{
    public string Year { get; set; }
    public double Europe { get; set; }
    public double China { get; set; }
    public double America { get; set; }
}

public class CountryRenewableElectricity
    : List<CountryRenewableElectricityItem>
{
    public CountryRenewableElectricity()
    {
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2009",
            Europe = 34,
            China = 21,
            America = 19
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2010",
            Europe = 43,
            China = 26,
            America = 24
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2011",
            Europe = 66,
            China = 29,
            America = 28
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2012",
            Europe = 69,
            China = 32,
            America = 26
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2013",
            Europe = 58,
            China = 47,
            America = 38
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2014",
            Europe = 40,
            China = 46,
            America = 31
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2015",
            Europe = 78,
            China = 50,
            America = 19
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2016",
            Europe = 13,
            China = 90,
            America = 52
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2017",
            Europe = 78,
            China = 132,
            America = 50
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2018",
            Europe = 40,
            China = 134,
            America = 34
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2018",
            Europe = 40,
            China = 134,
            America = 34
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2019",
            Europe = 80,
            China = 96,
            America = 38
        });
    }
}csコピー

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbLegendModule),
                typeof(IgbCategoryChartModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Renewable Electricity Generated
    </div>
    <div class="legend">
        <IgbLegend
        Name="legend"
        @ref="legend"
        Orientation="LegendOrientation.Horizontal">
        </IgbLegend>

    </div>
    <div class="container vertical fill">
        <IgbCategoryChart
        Name="chart"
        @ref="chart"
        ChartType="CategoryChartType.Line"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        DataSource="CountryRenewableElectricity"
        IncludedProperties="@(new string[] { "Year", "Europe", "China", "America" })"
        YAxisTitle="TWh"
        YAxisTitleLeftMargin="10"
        YAxisTitleRightMargin="5"
        YAxisLabelLeftMargin="0"
        ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var legend = this.legend;
        var chart = this.chart;

        this.BindElements = () => {
            chart.Legend = this.legend;
        };
        this.BindElements();

    }

    private IgbLegend legend;
    private IgbCategoryChart chart;

    private CountryRenewableElectricity _countryRenewableElectricity = null;
    public CountryRenewableElectricity CountryRenewableElectricity
    {
        get
        {
            if (_countryRenewableElectricity == null)
            {
                _countryRenewableElectricity = new CountryRenewableElectricity();
            }
            return _countryRenewableElectricity;
        }
    }

}razorコピー

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
cssコピー

Blazor Gráfico de anillos

El gráfico de Blazor Gráfico de anillos o de rosquilla, es una variante de un Gráfico circular, que ilustra proporcionalmente las ocurrencias de una variable en un círculo para representar partes de un todo. El gráfico de anillos tiene una abertura circular en el centro del gráfico circular, donde se puede mostrar un título o una explicación de categoría. Los gráficos de anillos pueden admitir varios anillos concéntricos, con soporte integrado para visualizar datos jerárquicos. Más información sobre nuestra tabla de donas

EXAMPLE

Blazor Gráfico de áreas

El Blazor Gráfico de áreas se representa utilizando una colección de puntos conectados por segmentos de línea recta con el área debajo de la línea rellenada. Los valores se representan en el eje Y (etiquetas en el lado izquierdo) y las categorías se muestran en el eje X (etiquetas inferiores). Los gráficos de área enfatizan la cantidad de cambio durante un período de tiempo o comparan varios elementos, así como la relación de las partes de un todo, mostrando el total de los valores trazados. Más información sobre nuestra tabla de áreas

EXAMPLE

Gráfico de Blazor minigráfico

El gráfico de minigráficos de Blazor o gráfico de minigráficos es un tipo de gráfico de categorías diseñado para representarse dentro de un diseño a pequeña escala, como dentro de una celda de cuadrícula, o en cualquier lugar donde se necesite una visualización del tamaño de una palabra para contar una historia de datos. Al igual que otros tipos de gráficos Blazor, el gráfico de minigráfico tiene varios elementos visuales y las características correspondientes que se pueden configurar y personalizar, como el tipo de gráfico, los marcadores, los rangos, las líneas de tendencia, el trazado de valores desconocidos y la información sobre herramientas. Los gráficos de minigráficos se pueden representar como un gráfico de Gráfico de líneas, Gráfico de áreas Gráfico de columnas o de pérdidas y ganancias. La diferencia entre el gráfico de tamaño completo equivalente al gráfico Spark es que el eje Y (etiquetas del lado izquierdo) y el eje X (etiquetas inferiores) no son visibles. Más información sobre nuestro gráfico de minigráficos.

EXAMPLE

Blazor Gráfico de burbujas

El gráfico de burbujas Blazor, o gráfico de burbujas, se utiliza para mostrar datos que constan de tres valores numéricos. Dos de los valores se trazan como un punto de intersección mediante un sistema de coordenadas cartesianas (X, Y) y el tercer valor se representa como el tamaño del diámetro del punto. Esto le da su nombre al gráfico de burbujas: una visualización de burbujas de diferentes tamaños a lo largo de las coordenadas X e Y del gráfico. El gráfico de burbujas de Blazor se utiliza para mostrar las relaciones de las correlaciones de datos con las diferencias de valor de datos representadas por tamaño. También puede utilizar una cuarta dimensión de datos, normalmente color, para diferenciar aún más los valores del gráfico de burbujas. Obtenga más información sobre nuestro gráfico de burbujas.

EXAMPLE

CountryStatsAfrica.cs

CountryStatsEurope.cs

MODULES

RAZOR

CSS

using System;
using System.Collections.Generic;
public class CountryStatsAfricaItem
{
    public string Code { get; set; }
    public double Population { get; set; }
    public double WorkedHours { get; set; }
    public double GDP { get; set; }
    public string Name { get; set; }
}

public class CountryStatsAfrica
    : List<CountryStatsAfricaItem>
{
    public CountryStatsAfrica()
    {
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"DZA",
            Population = 39728000,
            WorkedHours = 47.5,
            GDP = 13725,
            Name = @"Algeria"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"AGO",
            Population = 27884000,
            WorkedHours = 39.8,
            GDP = 6228,
            Name = @"Angola"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"BEN",
            Population = 10576000,
            WorkedHours = 43.7,
            GDP = 1987,
            Name = @"Benin"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"BWA",
            Population = 2121000,
            WorkedHours = 41.2,
            GDP = 15357,
            Name = @"Botswana"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"BFA",
            Population = 18111000,
            WorkedHours = 39.3,
            GDP = 1596,
            Name = @"Burkina Faso"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"BDI",
            Population = 10160000,
            WorkedHours = 36.4,
            GDP = 748,
            Name = @"Burundi"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"CMR",
            Population = 23298000,
            WorkedHours = 42,
            GDP = 3289,
            Name = @"Cameroon"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"CPV",
            Population = 525000,
            WorkedHours = 45,
            GDP = 5915,
            Name = @"Cape Verde"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"CAF",
            Population = 4493000,
            WorkedHours = 38,
            GDP = 622,
            Name = @"Central African Republic"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"TCD",
            Population = 14111000,
            WorkedHours = 40.4,
            GDP = 2067,
            Name = @"Chad"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"COM",
            Population = 777000,
            WorkedHours = 40.1,
            GDP = 1413,
            Name = @"Comoros"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"COG",
            Population = 4856000,
            WorkedHours = 38.1,
            GDP = 5543,
            Name = @"Congo"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"CIV",
            Population = 23226000,
            WorkedHours = 39.7,
            GDP = 3242,
            Name = @"Cote Ivoire"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"COD",
            Population = 76245000,
            WorkedHours = 44,
            GDP = 812,
            Name = @"Democratic Republic of Congo"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"EGY",
            Population = 92443000,
            WorkedHours = 39.7,
            GDP = 10096,
            Name = @"Egypt"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"GNQ",
            Population = 1169000,
            WorkedHours = 38.8,
            GDP = 27554,
            Name = @"Equatorial Guinea"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"SWZ",
            Population = 1104000,
            WorkedHours = 45.7,
            GDP = 7759,
            Name = @"Eswatini"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"ETH",
            Population = 101000000,
            WorkedHours = 40.1,
            GDP = 1533,
            Name = @"Ethiopia"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"GAB",
            Population = 1948000,
            WorkedHours = 40.5,
            GDP = 16837,
            Name = @"Gabon"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"GMB",
            Population = 2086000,
            WorkedHours = 40.3,
            GDP = 1568,
            Name = @"Gambia"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"GHA",
            Population = 27849000,
            WorkedHours = 47.6,
            GDP = 3927,
            Name = @"Ghana"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"GIN",
            Population = 11432000,
            WorkedHours = 43.4,
            GDP = 1758,
            Name = @"Guinea"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"GNB",
            Population = 1737000,
            WorkedHours = 35.1,
            GDP = 1446,
            Name = @"Guinea-Bissau"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"KEN",
            Population = 47878000,
            WorkedHours = 43.9,
            GDP = 2836,
            Name = @"Kenya"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"LSO",
            Population = 2059000,
            WorkedHours = 47.6,
            GDP = 2708,
            Name = @"Lesotho"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"LBR",
            Population = 4472000,
            WorkedHours = 40.3,
            GDP = 785,
            Name = @"Liberia"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"LBY",
            Population = 6418000,
            WorkedHours = 42.5,
            GDP = 14847,
            Name = @"Libya"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"MDG",
            Population = 24234000,
            WorkedHours = 40.8,
            GDP = 1377,
            Name = @"Madagascar"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"MWI",
            Population = 16745000,
            WorkedHours = 44.5,
            GDP = 1089,
            Name = @"Malawi"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"MLI",
            Population = 17439000,
            WorkedHours = 40.6,
            GDP = 1919,
            Name = @"Mali"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"MRT",
            Population = 4046000,
            WorkedHours = 45.9,
            GDP = 3602,
            Name = @"Mauritania"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"MUS",
            Population = 1259000,
            WorkedHours = 44.4,
            GDP = 18864,
            Name = @"Mauritius"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"MAR",
            Population = 34664000,
            WorkedHours = 39.6,
            GDP = 7297,
            Name = @"Morocco"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"MOZ",
            Population = 27042000,
            WorkedHours = 46.7,
            GDP = 1118,
            Name = @"Mozambique"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"NAM",
            Population = 2315000,
            WorkedHours = 43.1,
            GDP = 9975,
            Name = @"Namibia"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"NER",
            Population = 20002000,
            WorkedHours = 45,
            GDP = 908,
            Name = @"Niger"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"NGA",
            Population = 181000000,
            WorkedHours = 32.76,
            GDP = 5671,
            Name = @"Nigeria"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"RWA",
            Population = 11369000,
            WorkedHours = 46.3,
            GDP = 1731,
            Name = @"Rwanda"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"STP",
            Population = 199000,
            WorkedHours = 38.2,
            GDP = 2948,
            Name = @"Sao Tome"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"SEN",
            Population = 14578000,
            WorkedHours = 46.8,
            GDP = 2294,
            Name = @"Senegal"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"SYC",
            Population = 95000,
            WorkedHours = 39.8,
            GDP = 24857,
            Name = @"Seychelles"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"SLE",
            Population = 7172000,
            WorkedHours = 35.4,
            GDP = 1314,
            Name = @"Sierra Leone"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"ZAF",
            Population = 55386000,
            WorkedHours = 42.48,
            GDP = 12378,
            Name = @"South Africa"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"SSD",
            Population = 10716000,
            WorkedHours = 39.3,
            GDP = 1875,
            Name = @"South Sudan"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"SDN",
            Population = 38903000,
            WorkedHours = 36.3,
            GDP = 4290,
            Name = @"Sudan"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"TZA",
            Population = 51483000,
            WorkedHours = 38,
            GDP = 2491,
            Name = @"Tanzania"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"TGO",
            Population = 7323000,
            WorkedHours = 38.8,
            GDP = 1351,
            Name = @"Togo"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"TUN",
            Population = 11180000,
            WorkedHours = 35.2,
            GDP = 10766,
            Name = @"Tunisia"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"UGA",
            Population = 38225000,
            WorkedHours = 38.6,
            GDP = 1666,
            Name = @"Uganda"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"ZMB",
            Population = 15879000,
            WorkedHours = 46.6,
            GDP = 3627,
            Name = @"Zambia"
        });
        this.Add(new CountryStatsAfricaItem()
        {
            Code = @"ZWE",
            Population = 13815000,
            WorkedHours = 41.4,
            GDP = 1912,
            Name = @"Zimbabwe"
        });
    }
}csコピー

using System;
using System.Collections.Generic;
public class CountryStatsEuropeItem
{
    public string Code { get; set; }
    public double Population { get; set; }
    public double WorkedHours { get; set; }
    public double GDP { get; set; }
    public string Name { get; set; }
}

public class CountryStatsEurope
    : List<CountryStatsEuropeItem>
{
    public CountryStatsEurope()
    {
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"ALB",
            Population = 2891000,
            WorkedHours = 41,
            GDP = 10970,
            Name = @"Albania"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"AUT",
            Population = 8679000,
            WorkedHours = 30.75,
            GDP = 44305,
            Name = @"Austria"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"BLR",
            Population = 9439000,
            WorkedHours = 43.5,
            GDP = 17230,
            Name = @"Belarus"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"BEL",
            Population = 11288000,
            WorkedHours = 29.7,
            GDP = 41708,
            Name = @"Belgium"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"BIH",
            Population = 3429000,
            WorkedHours = 46.5,
            GDP = 10932,
            Name = @"Bosnia"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"BGR",
            Population = 7200000,
            WorkedHours = 31.62,
            GDP = 17000,
            Name = @"Bulgaria"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"HRV",
            Population = 4233000,
            WorkedHours = 35.15,
            GDP = 20984,
            Name = @"Croatia"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"CYP",
            Population = 1161000,
            WorkedHours = 34.42,
            GDP = 30549,
            Name = @"Cyprus"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"CZE",
            Population = 10601000,
            WorkedHours = 33.77,
            GDP = 30605,
            Name = @"Czechia"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"DNK",
            Population = 5689000,
            WorkedHours = 27.16,
            GDP = 45459,
            Name = @"Denmark"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"EST",
            Population = 1315000,
            WorkedHours = 35.61,
            GDP = 27550,
            Name = @"Estonia"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"FIN",
            Population = 5481000,
            WorkedHours = 31.48,
            GDP = 38942,
            Name = @"Finland"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"FRA",
            Population = 64453000,
            WorkedHours = 29.03,
            GDP = 37766,
            Name = @"France"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"DEU",
            Population = 81787000,
            WorkedHours = 26.31,
            GDP = 43938,
            Name = @"Germany"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"GRC",
            Population = 10660000,
            WorkedHours = 39.06,
            GDP = 24170,
            Name = @"Greece"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"HUN",
            Population = 9778000,
            WorkedHours = 36.99,
            GDP = 25034,
            Name = @"Hungary"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"ISL",
            Population = 330000,
            WorkedHours = 29.02,
            GDP = 43048,
            Name = @"Iceland"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"IRL",
            Population = 4652000,
            WorkedHours = 33.47,
            GDP = 60818,
            Name = @"Ireland"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"ITA",
            Population = 60578000,
            WorkedHours = 33.04,
            GDP = 34302,
            Name = @"Italy"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"LVA",
            Population = 1998000,
            WorkedHours = 36.57,
            GDP = 23019,
            Name = @"Latvia"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"LTU",
            Population = 2932000,
            WorkedHours = 35.76,
            GDP = 27046,
            Name = @"Lithuania"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"LUX",
            Population = 567000,
            WorkedHours = 29.25,
            GDP = 94089,
            Name = @"Luxembourg"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"MLT",
            Population = 434000,
            WorkedHours = 37.78,
            GDP = 34087,
            Name = @"Malta"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"MDA",
            Population = 4071000,
            WorkedHours = 41,
            GDP = 4747,
            Name = @"Moldova"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"MNE",
            Population = 627000,
            WorkedHours = 47.2,
            GDP = 15290,
            Name = @"Montenegro"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"NLD",
            Population = 16938000,
            WorkedHours = 27.38,
            GDP = 46494,
            Name = @"Netherlands"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"MKD",
            Population = 2079000,
            WorkedHours = 36.6,
            GDP = 12760,
            Name = @"North Macedonia"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"NOR",
            Population = 5200000,
            WorkedHours = 27.36,
            GDP = 64008,
            Name = @"Norway"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"POL",
            Population = 38034000,
            WorkedHours = 39.4,
            GDP = 25300,
            Name = @"Poland"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"PRT",
            Population = 10368000,
            WorkedHours = 36.06,
            GDP = 26608,
            Name = @"Portugal"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"ROU",
            Population = 19925000,
            WorkedHours = 34.34,
            GDP = 20556,
            Name = @"Romania"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"RUS",
            Population = 145000000,
            WorkedHours = 38.04,
            GDP = 24517,
            Name = @"Russia"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"SMR",
            Population = 33000,
            WorkedHours = 40.1,
            GDP = 56372,
            Name = @"San Marino"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"SRB",
            Population = 8877000,
            WorkedHours = 46.5,
            GDP = 13278,
            Name = @"Serbia"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"SVK",
            Population = 5436000,
            WorkedHours = 33.73,
            GDP = 28309,
            Name = @"Slovakia"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"SVN",
            Population = 2071000,
            WorkedHours = 32.46,
            GDP = 29038,
            Name = @"Slovenia"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"ESP",
            Population = 46672000,
            WorkedHours = 32.68,
            GDP = 32291,
            Name = @"Spain"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"SWE",
            Population = 9765000,
            WorkedHours = 30.96,
            GDP = 45679,
            Name = @"Sweden"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"CHE",
            Population = 8297000,
            WorkedHours = 30.57,
            GDP = 57264,
            Name = @"Switzerland"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"UKR",
            Population = 44922000,
            WorkedHours = 38.6,
            GDP = 7465,
            Name = @"Ukraine"
        });
        this.Add(new CountryStatsEuropeItem()
        {
            Code = @"GBR",
            Population = 65860000,
            WorkedHours = 32.1,
            GDP = 38839,
            Name = @"United Kingdom"
        });
    }
}csコピー

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbLegendModule),
                typeof(IgbNumberAbbreviatorModule),
                typeof(IgbDataChartCoreModule),
                typeof(IgbDataChartScatterModule),
                typeof(IgbDataChartScatterCoreModule),
                typeof(IgbDataChartInteractivityModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Total Population of Selected Countries
    </div>
    <div class="legend">
        <IgbLegend
        Name="legend"
        @ref="legend"
        Orientation="LegendOrientation.Horizontal">
        </IgbLegend>

    </div>
    <div class="container vertical fill">
        <IgbDataChart
        Name="chart"
        @ref="chart">
            <IgbNumericXAxis
            Name="xAxis"
            @ref="xAxis"
            IsLogarithmic="true"
            AbbreviateLargeNumbers="true"
            Title="Population">
            </IgbNumericXAxis>

            <IgbNumericYAxis
            Name="yAxis"
            @ref="yAxis"
            Title="GDP per Capita"
            MaximumValue="1000000"
            TitleLeftMargin="10"
            IsLogarithmic="true"
            AbbreviateLargeNumbers="true">
            </IgbNumericYAxis>

            <IgbBubbleSeries
            Name="bubbleSeries1"
            @ref="bubbleSeries1"
            Title="African Countries"
            XAxisName="xAxis"
            YAxisName="yAxis"
            XMemberPath="Population"
            YMemberPath="GDP"
            RadiusMemberPath="WorkedHours"
            XMemberAsLegendLabel="Population"
            YMemberAsLegendLabel="GDP"
            RadiusMemberAsLegendLabel="Work Hours"
            DataSource="CountryStatsAfrica"
            MarkerType="MarkerType.Circle"
            ShowDefaultTooltip="true"
            RadiusScale="SizeScale1">
            </IgbBubbleSeries>

            <IgbBubbleSeries
            Name="bubbleSeries2"
            @ref="bubbleSeries2"
            Title="European Countries"
            XAxisName="xAxis"
            YAxisName="yAxis"
            XMemberPath="Population"
            YMemberPath="GDP"
            RadiusMemberPath="WorkedHours"
            XMemberAsLegendLabel="Population"
            YMemberAsLegendLabel="GDP"
            RadiusMemberAsLegendLabel="Work Hours"
            DataSource="CountryStatsEurope"
            MarkerType="MarkerType.Circle"
            ShowDefaultTooltip="true"
            RadiusScale="SizeScale2">
            </IgbBubbleSeries>

            <IgbDataToolTipLayer
            Name="dataToolTipLayer"
            @ref="dataToolTipLayer"
            ValueRowMarginTop="1"
            LabelTextMarginTop="1"
            TitleTextMarginTop="1"
            UnitsTextMarginTop="1"
            ValueRowMarginBottom="1"
            LabelTextMarginBottom="1"
            TitleTextMarginBottom="1"
            UnitsTextMarginBottom="1"
            UnitsTextMarginRight="5"
            ValueTextMarginLeft="10"
            LabelTextMarginLeft="1"
            LayoutMode="DataLegendLayoutMode.Vertical">
            </IgbDataToolTipLayer>

        </IgbDataChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var legend = this.legend;
        var chart = this.chart;
        var xAxis = this.xAxis;
        var yAxis = this.yAxis;
        var bubbleSeries1 = this.bubbleSeries1;
        var bubbleSeries2 = this.bubbleSeries2;
        var dataToolTipLayer = this.dataToolTipLayer;

        this.BindElements = () => {
            chart.Legend = this.legend;
        };
        this.BindElements();

    }

    private IgbLegend legend;
    private IgbDataChart chart;
    private IgbNumericXAxis xAxis;
    private IgbNumericYAxis yAxis;
    private IgbBubbleSeries bubbleSeries1;
    private IgbSizeScale _sizeScale1 = null;
    public IgbSizeScale SizeScale1
    {
        get
        {
            if (this._sizeScale1 == null)
            {
                var sizeScale1 = new IgbSizeScale();
                sizeScale1.IsLogarithmic = false;
                sizeScale1.MinimumValue = 10;
                sizeScale1.MaximumValue = 80;
                this._sizeScale1 = sizeScale1;
            }
            return this._sizeScale1;
        }
    }
    private IgbBubbleSeries bubbleSeries2;
    private IgbSizeScale _sizeScale2 = null;
    public IgbSizeScale SizeScale2
    {
        get
        {
            if (this._sizeScale2 == null)
            {
                var sizeScale2 = new IgbSizeScale();
                sizeScale2.IsLogarithmic = false;
                sizeScale2.MinimumValue = 10;
                sizeScale2.MaximumValue = 80;
                this._sizeScale2 = sizeScale2;
            }
            return this._sizeScale2;
        }
    }
    private IgbDataToolTipLayer dataToolTipLayer;

    private CountryStatsAfrica _countryStatsAfrica = null;
    public CountryStatsAfrica CountryStatsAfrica
    {
        get
        {
            if (_countryStatsAfrica == null)
            {
                _countryStatsAfrica = new CountryStatsAfrica();
            }
            return _countryStatsAfrica;
        }
    }

    private CountryStatsEurope _countryStatsEurope = null;
    public CountryStatsEurope CountryStatsEurope
    {
        get
        {
            if (_countryStatsEurope == null)
            {
                _countryStatsEurope = new CountryStatsEurope();
            }
            return _countryStatsEurope;
        }
    }

}razorコピー

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
cssコピー

Blazor Gráfico Financiero / Bursátil

El Blazor Gráfico financiero o de acciones, es una visualización compuesta que representa datos de acciones y datos financieros en un gráfico de series temporales que incluye elementos visuales interactivos en una barra de herramientas como filtros de día / semana / mes, selección de tipo de gráfico, selección de tipo de volumen, selección de indicadores y selección de líneas de tendencias. Diseñado para la personalización, el gráfico de acciones de Blazor se puede personalizar de cualquier manera para brindar una visualización e interpretación más fáciles de sus datos. El gráfico financiero representa los datos de fecha y hora a lo largo del eje X (etiquetas inferiores) y muestra campos como los volúmenes de apertura, máximo, mínimo y cierre. El tipo de gráfico para representar los datos de series temporales puede ser Barra, Vela, Columna o Línea. Obtenga más información sobre nuestro gráfico de acciones.

EXAMPLE

Blazor Gráfico de columnas

El Blazor Gráfico de columnas o gráfico de columnas es uno de los tipos de gráficos de categorías más comunes que se utilizan para comparar rápidamente la frecuencia, el recuento, el total o el promedio de los datos en diferentes categorías con datos codificados por barras verticales de igual ancho y diferentes longitudes. Son ideales para mostrar las variaciones en el valor de un artículo a lo largo del tiempo, la distribución de datos, la clasificación de datos ordenados (de mayor a menor, de peor a mejor). Los datos se representan mediante una colección de rectángulos que se extienden desde la parte superior hasta la parte inferior del gráfico hacia los valores de los puntos de datos. Obtenga más información sobre nuestro gráfico de columnas.

EXAMPLE

Blazor Gráfico compuesto

El Blazor Gráfico compuesto, también llamado gráfico combinado, es una visualización que combina diferentes tipos de gráficos en la misma área de trazado. Es muy útil cuando se presentan dos series de datos que tienen una escala muy diferente y pueden expresarse en unidades diferentes. El ejemplo más común es el de los dólares en un eje y el porcentaje en el otro eje. Obtenga más información sobre nuestro gráfico compuesto.

EXAMPLE

Blazor Gráfico polar

El Blazor Gráfico de áreas polar o gráfico polar pertenece a un grupo de cartas polares y tiene la forma de un polígono relleno cuyos vértices o esquinas se encuentran en las coordenadas polares (ángulo/radio) de los puntos de datos. El Gráfico de áreas Polar utiliza los mismos conceptos de trazado de datos que el Gráfico de dispersión pero envuelve los puntos de datos alrededor de un círculo en lugar de estirarlos horizontalmente. Al igual que con otros tipos de series, se pueden trazar varios gráficos de áreas polares en el mismo gráfico de datos y se pueden superponer entre sí para mostrar las diferencias y similitudes entre los conjuntos de datos. Más información sobre nuestra carta polar.

EXAMPLE

Blazor Gráfico de dispersión

El Blazor Gráfico de dispersión, o gráfico de dispersión, se utiliza para mostrar la relación entre dos valores utilizando un sistema de coordenadas cartesianas (X, Y) para representar los datos. Cada punto de datos se representa como el punto de intersección del valor de datos en los ejes X e Y. Los gráficos de dispersión llaman la atención sobre intervalos desiguales o grupos de datos. Pueden resaltar la desviación de los datos recopilados con respecto a los resultados previstos y, a menudo, se utilizan para trazar datos científicos y estadísticos. El gráfico de dispersión de Blazor organiza y traza los datos cronológicamente (incluso si los datos no están en orden cronológico antes del enlace) en los ejes X e Y. Obtenga más información sobre nuestro gráfico de dispersión.

EXAMPLE

Blazor Gráfico de formas

Los gráficos de formas Blazor son un grupo de gráficos que toman una matriz de formas (matriz o matrices de puntos X/Y) y las representan como una colección de polígonos o polilíneas en un sistema de coordenadas cartesiano (x, y). A menudo se utilizan para resaltar regiones en datos científicos o se pueden utilizar para trazar diagramas, planos o incluso planos de edificios. Obtenga más información sobre nuestra tabla de formas.

EXAMPLE

Gráfico de spline de Blazor

El gráfico de splines de Blazor o gráfico de splines es un tipo de gráfico de líneas de categoría que muestra los valores de datos continuos representados por puntos conectados por segmentos de línea suave de una o más cantidades durante un período de tiempo para mostrar tendencias y realizar análisis comparativos. El eje Y (etiquetas en el lado izquierdo) muestra un valor numérico, mientras que el eje X (etiquetas inferiores) muestra una serie temporal o una categoría de comparación. Puede incluir uno o más conjuntos de datos para comparar, que se representarían como varias líneas en el gráfico. El gráfico Spline Blazor es idéntico al gráfico Spline Blazor, la única diferencia es que el gráfico de líneas son puntos conectados por líneas rectas y los puntos del gráfico spline están conectados por curvas suaves. Obtenga más información sobre nuestro gráfico de spline.​

EXAMPLE

Gráfico de Blazor pasos

El gráfico de Blazor pasos, o gráfico de pasos, es un gráfico de categorías que representa una colección de puntos de datos conectados por líneas verticales y horizontales continuas que forman una progresión escalonada. Los valores se representan en el eje Y (etiquetas de la izquierda) y las categorías se muestran en el eje X (etiquetas inferiores). El gráfico de líneas de Blazor escalones enfatiza la cantidad de cambio durante un período de tiempo o compara varios elementos. El gráfico de líneas de Blazor escalones es idéntico al Blazor Gráfico de áreas de escalones en todos los aspectos, excepto que el área debajo de las líneas de paso no se rellena. Más información sobre nuestra tabla de pasos

EXAMPLE

Blazor Mapa de rectángulos

El mapa de rectángulos de Ignite UI for Blazor muestra datos jerárquicos (estructurados en árbol) como un conjunto de nodos anidados. A cada rama del árbol se le asigna un nodo de mapa de árboles, que luego se coloca en mosaico con nodos más pequeños que representan subramas. El rectángulo de cada nodo tiene un área proporcional a una dimensión especificada en los datos. A menudo, los nodos se colorean para mostrar una dimensión separada de los datos. Más información sobre nuestros treemaps.

EXAMPLE

Características principales de Blazor Charts

Muestre cómo cambian sus datos con el tiempo con nuestro Eje de Tiempo integrado. Cambiaremos dinámicamente escalas de tiempo y formatos de etiquetas a medida que interactúa con su gráfico. Hemos incluido un Gráfico financiero completo con todas las funciones que espera de sus gráficos financieros, como Yahoo Finance o Google Finance.

Gráficos dinámicos

Visualice sus datos creando un nuevo Gráfico compuesto y superponiendo varias series en un solo gráfico. En el gráfico, puede mostrar y superponer varias columnas del gráfico para crear columnas apiladas.

Información sobre herramientas personalizada

Visualice sus datos creando nuevas vistas compuestas y superponiendo varias series en un solo gráfico. En el gráfico, puede crear información sobre herramientas personalizada con imágenes, enlace de datos e incluso combinar información sobre herramientas de varias series en una sola información sobre herramientas.

Gráficos de alto rendimiento en tiempo real

Muestre miles de puntos de datos con actualizaciones a nivel de milisegundos en tiempo real con datos en vivo y en streaming. No experimentará retrasos, parpadeos en la pantalla ni retrasos visuales, incluso cuando interactúe con el gráfico en un dispositivo táctil. Para ver una demostración, consulte el tema Gráfico con alta frecuencia.

Manejo de datos de gran volumen

Optimice el rendimiento del gráfico para representar millones de puntos de datos mientras el gráfico sigue proporcionando un rendimiento fluido cuando los usuarios finales intentan acercar o alejar el zoom o navegar por el contenido del gráfico. Para ver una demostración, consulte el tema Gráfico con alto volumen.

Diseño modular

El gráfico Blazor está diseñado para la modularidad. Solo las características que se necesitan forman parte de la implementación, de modo que se obtiene el menor espacio posible en las páginas renderizadas.

Enlace de datos inteligente

Elijamos el tipo de gráfico. Nuestro Adaptador de datos inteligente elige automáticamente el mejor tipo de gráfico para los datos. Todo lo que haces es configurar la fuente de datos y nosotros hacemos el resto.

Líneas de tendencia

Blazor gráficos son compatibles con todas las líneas de tendencia que necesites, incluidas las líneas de tendencia lineales (x), cuadráticas (x2), cúbicas (x3), cuárticas (x4), quíntricas (x5), logarítmicas (log x), exponenciales (ex) y de ley de potencia (axk + o(xk)).

Panorámica y zoom interactivos

Utilice el teclado simple o multitáctil, la barra de zoom, la rueda del mouse, arrastre y seleccione para cualquier región rectangular con el mouse para acercar y ver de cerca los puntos de datos, desplazar el historial de datos o desplazar regiones de datos.

Marcadores, información sobre herramientas y plantillas

Utilice uno de los 10 tipos de marcadores o cree su propia plantilla de marcadores para resaltar datos o utilice información sobre herramientas simples o un gráfico de múltiples ejes y series con información sobre herramientas personalizada para brindar más contexto y significado a sus datos.

¡Pero espera hay mas!

Si estás considerando otros gráficos Blazor en el mercado, aquí hay algunas cosas que debes tener en cuenta:

• Incluimos más de 65 tipos de gráficos Blazor y gráficos combinados, con la configuración más simple del mercado con nuestro adaptador de datos inteligente.
• Nuestros gráficos están optimizados en todas las plataformas, incluidas Angular, Blazor, jQuery / JavaScript, React, UNO, UWP, WPF, Windows Forms, WebComponents, WinUI y Xamarin. Son compatibles con la misma API y las mismas funciones en todas las plataformas.
• Nuestro gráfico de acciones y gráficos financieros le brindan todo lo que necesita para una experiencia similar a la de Yahoo Finance o Google Finance, todo con una sola línea de código.
• Probamos el rendimiento de todos los demás. Todo el mundo dice que son rápidos y que pueden manejar muchos datos, pero podemos demostrarlo. Vea usted mismo cómo manejamos grandes volúmenes de datos y transmisión de datos en tiempo real.
• Estamos disponibles las 24 horas, los 5 días de la semana. Infragistics cuenta con soporte global que siempre está en línea. Para América del Norte, Asia Pacífico, Medio Oriente y Europa, ¡estamos disponibles cuando usted lo esté!
• Además de los gráficos, tenemos muchos más controles de interfaz de usuario en Blazor. ¡Ofrecemos una solución Blazor completa para crear sus aplicaciones!

Referencias de API

Todos los tipos de gráficos mencionados en este tema se implementan en estos componentes API:

• IgbCategoryChart
• IgbDataChart
• IgbFinancialChart
• IgbTreemap