Blazor 散布図

Ignite UI for Blazor 散布図は、異なる一連のデータ内の項目間の関係を示したり、数値の x 座標と y 座標を使用してデータ項目をプロットしたりするチャートのグループに属しています。このチャートは、データの不均等な散らばりやデータの塊に注意が向けられます。科学データのプロットによく用いられ、予測結果からの収集データの偏差をハイライト表示できます。また、データを時シリーズに (データが時系列でない場合であっても) 構成するためにも使用できます。

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

無料で試してみる

Blazor 散布マーカー チャート

Blazor 散布図は、マーカーのコレクションとして描画されます。各マーカーには、デカルト座標系での位置を決定する 1 対の数値 X/Y 値があります。IgbDataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgbScatterSeries にバインドします:

EXAMPLE

MODULES

DATA

RAZOR

CSS

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(IgbDataChartScatterModule),
                typeof(IgbDataChartScatterCoreModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbDataChartAnnotationModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

// NOTE this file contains multiple data sources:


// Data Source #1
using System;
using System.Collections.Generic;
public class CountryDemographicAfricanItem
{
    public double Population { get; set; }
    public double BirthRate { get; set; }
    public double DeathRate { get; set; }
    public string Name { get; set; }
}

public class CountryDemographicAfrican
    : List<CountryDemographicAfricanItem>
{
    public CountryDemographicAfrican()
    {
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 39728000,
            BirthRate = 23.9,
            DeathRate = 4.77,
            Name = @"Algeria"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 27884000,
            BirthRate = 42.32,
            DeathRate = 8.68,
            Name = @"Angola"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 10576000,
            BirthRate = 37.43,
            DeathRate = 9.32,
            Name = @"Benin"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 2121000,
            BirthRate = 24.14,
            DeathRate = 7.02,
            Name = @"Botswana"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 18111000,
            BirthRate = 39.44,
            DeathRate = 8.82,
            Name = @"Burkina Faso"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 10160000,
            BirthRate = 42.66,
            DeathRate = 11.03,
            Name = @"Burundi"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 23298000,
            BirthRate = 36.84,
            DeathRate = 10.35,
            Name = @"Cameroon"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 525000,
            BirthRate = 21.14,
            DeathRate = 5.61,
            Name = @"Cape Verde"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 4493000,
            BirthRate = 36.11,
            DeathRate = 14.01,
            Name = @"C.A.R."
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 14111000,
            BirthRate = 43.86,
            DeathRate = 13.22,
            Name = @"Chad"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 777000,
            BirthRate = 33.33,
            DeathRate = 7.49,
            Name = @"Comoros"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 4856000,
            BirthRate = 35.23,
            DeathRate = 7.56,
            Name = @"Congo"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 23226000,
            BirthRate = 37.1,
            DeathRate = 12.54,
            Name = @"Cote Ivoire"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 76245000,
            BirthRate = 42.81,
            DeathRate = 10.19,
            Name = @"DCongo"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 914000,
            BirthRate = 23.35,
            DeathRate = 8.37,
            Name = @"Djibouti"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 92443000,
            BirthRate = 27.2,
            DeathRate = 5.96,
            Name = @"Egypt"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 1169000,
            BirthRate = 34.64,
            DeathRate = 10.34,
            Name = @"Equatorial Guinea"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 3343000,
            BirthRate = 32.83,
            DeathRate = 7.07,
            Name = @"Eritrea"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 100835000,
            BirthRate = 32.3,
            DeathRate = 7,
            Name = @"Ethiopia"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 1948000,
            BirthRate = 30.09,
            DeathRate = 7.82,
            Name = @"Gabon"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 2086000,
            BirthRate = 39.99,
            DeathRate = 8.2,
            Name = @"Gambia"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 27849000,
            BirthRate = 31.56,
            DeathRate = 8.31,
            Name = @"Ghana"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 11432000,
            BirthRate = 36.36,
            DeathRate = 9.58,
            Name = @"Guinea"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 1737000,
            BirthRate = 37.15,
            DeathRate = 10.78,
            Name = @"Guinea-Bissau"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 47878000,
            BirthRate = 31.78,
            DeathRate = 5.84,
            Name = @"Kenya"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 2059000,
            BirthRate = 28.16,
            DeathRate = 12.92,
            Name = @"Lesotho"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 4472000,
            BirthRate = 34.72,
            DeathRate = 8.12,
            Name = @"Liberia"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 6418000,
            BirthRate = 20.19,
            DeathRate = 5.2,
            Name = @"Libya"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 24234000,
            BirthRate = 33.4,
            DeathRate = 6.48,
            Name = @"Madagascar"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 16745000,
            BirthRate = 37.05,
            DeathRate = 7.5,
            Name = @"Malawi"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 17439000,
            BirthRate = 43.22,
            DeathRate = 10.67,
            Name = @"Mali"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 4046000,
            BirthRate = 34.57,
            DeathRate = 7.96,
            Name = @"Mauritania"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 1259000,
            BirthRate = 10.1,
            DeathRate = 7.7,
            Name = @"Mauritius"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 34664000,
            BirthRate = 20.4,
            DeathRate = 5.15,
            Name = @"Morocco"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 27042000,
            BirthRate = 39.36,
            DeathRate = 10.38,
            Name = @"Mozambique"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 2315000,
            BirthRate = 29.59,
            DeathRate = 7.46,
            Name = @"Namibia"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 20002000,
            BirthRate = 48.44,
            DeathRate = 9.94,
            Name = @"Niger"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 181136992,
            BirthRate = 39.37,
            DeathRate = 12.77,
            Name = @"Nigeria"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 11369000,
            BirthRate = 31.79,
            DeathRate = 6.13,
            Name = @"Rwanda"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 199000,
            BirthRate = 34.33,
            DeathRate = 6.81,
            Name = @"Sao Tome and Principe"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 14578000,
            BirthRate = 36.21,
            DeathRate = 6.07,
            Name = @"Senegal"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 95000,
            BirthRate = 17,
            DeathRate = 7.5,
            Name = @"Seychelles"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 7172000,
            BirthRate = 35.61,
            DeathRate = 13.03,
            Name = @"Sierra Leone"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 13797000,
            BirthRate = 43.66,
            DeathRate = 11.63,
            Name = @"Somalia"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 55386000,
            BirthRate = 21.3,
            DeathRate = 10.1,
            Name = @"South Africa"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 10716000,
            BirthRate = 36.32,
            DeathRate = 11.24,
            Name = @"South Sudan"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 38903000,
            BirthRate = 33.32,
            DeathRate = 7.52,
            Name = @"Sudan"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 1104000,
            BirthRate = 29.27,
            DeathRate = 9.86,
            Name = @"Swaziland"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 51483000,
            BirthRate = 38.64,
            DeathRate = 7.02,
            Name = @"Tanzania"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 7323000,
            BirthRate = 34.53,
            DeathRate = 8.83,
            Name = @"Togo"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 11180000,
            BirthRate = 18.65,
            DeathRate = 6.36,
            Name = @"Tunisia"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 38225000,
            BirthRate = 42.63,
            DeathRate = 8.87,
            Name = @"Uganda"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 15879000,
            BirthRate = 38.44,
            DeathRate = 8,
            Name = @"Zambia"
        });
        this.Add(new CountryDemographicAfricanItem()
        {
            Population = 13815000,
            BirthRate = 33.94,
            DeathRate = 8.4,
            Name = @"Zimbabwe"
        });
    }
}


// Data Source #2
using System;
using System.Collections.Generic;
public class CountryDemographicEuropeItem
{
    public double Population { get; set; }
    public double BirthRate { get; set; }
    public double DeathRate { get; set; }
    public string Name { get; set; }
}

public class CountryDemographicEurope
    : List<CountryDemographicEuropeItem>
{
    public CountryDemographicEurope()
    {
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 2891000,
            BirthRate = 11.88,
            DeathRate = 7.22,
            Name = @"Albania"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 8679000,
            BirthRate = 9.8,
            DeathRate = 9.6,
            Name = @"Austria"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 9439000,
            BirthRate = 12.5,
            DeathRate = 12.6,
            Name = @"Belarus"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 11288000,
            BirthRate = 10.8,
            DeathRate = 9.8,
            Name = @"Belgium"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 3429000,
            BirthRate = 9.12,
            DeathRate = 10.89,
            Name = @"Bosnia"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 7200000,
            BirthRate = 9.2,
            DeathRate = 15.3,
            Name = @"Bulgaria"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 165000,
            BirthRate = 9.39,
            DeathRate = 8.97,
            Name = @"Channel Islands"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 4233000,
            BirthRate = 8.9,
            DeathRate = 12.9,
            Name = @"Croatia"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 1161000,
            BirthRate = 10.98,
            DeathRate = 6.84,
            Name = @"Cyprus"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 10601000,
            BirthRate = 10.5,
            DeathRate = 10.5,
            Name = @"Czechia"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 5689000,
            BirthRate = 10.2,
            DeathRate = 9.2,
            Name = @"Denmark"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 1315000,
            BirthRate = 10.6,
            DeathRate = 11.6,
            Name = @"Estonia"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 48000,
            BirthRate = 12.4,
            DeathRate = 7.7,
            Name = @"Faeroe Islands"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 5481000,
            BirthRate = 10.1,
            DeathRate = 9.6,
            Name = @"Finland"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 64453000,
            BirthRate = 12,
            DeathRate = 8.9,
            Name = @"France"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 81787000,
            BirthRate = 9,
            DeathRate = 11.3,
            Name = @"Germany"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 10660000,
            BirthRate = 8.5,
            DeathRate = 11.2,
            Name = @"Greece"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 9778000,
            BirthRate = 9.4,
            DeathRate = 13.4,
            Name = @"Hungary"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 330000,
            BirthRate = 12.5,
            DeathRate = 6.6,
            Name = @"Iceland"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 4652000,
            BirthRate = 14.1,
            DeathRate = 6.5,
            Name = @"Ireland"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 60578000,
            BirthRate = 8,
            DeathRate = 10.7,
            Name = @"Italy"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 1998000,
            BirthRate = 11.1,
            DeathRate = 14.4,
            Name = @"Latvia"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 37000,
            BirthRate = 8.7,
            DeathRate = 6.7,
            Name = @"Liechtenstein"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 2932000,
            BirthRate = 10.8,
            DeathRate = 14.4,
            Name = @"Lithuania"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 567000,
            BirthRate = 10.7,
            DeathRate = 7,
            Name = @"Luxembourg"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 2079000,
            BirthRate = 11.3,
            DeathRate = 9.75,
            Name = @"Macedonia"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 434000,
            BirthRate = 10,
            DeathRate = 8,
            Name = @"Malta"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 4071000,
            BirthRate = 10.52,
            DeathRate = 11.42,
            Name = @"Moldova"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 38000,
            BirthRate = 8.1,
            DeathRate = 7.6,
            Name = @"Monaco"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 627000,
            BirthRate = 11.52,
            DeathRate = 9.8,
            Name = @"Montenegro"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 16938000,
            BirthRate = 10.1,
            DeathRate = 8.7,
            Name = @"Netherlands"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 5200000,
            BirthRate = 11.3,
            DeathRate = 7.8,
            Name = @"Norway"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 38034000,
            BirthRate = 9.7,
            DeathRate = 10.4,
            Name = @"Poland"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 10368000,
            BirthRate = 8.3,
            DeathRate = 10.5,
            Name = @"Portugal"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 19925000,
            BirthRate = 10,
            DeathRate = 13.2,
            Name = @"Romania"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 144984992,
            BirthRate = 13.3,
            DeathRate = 13,
            Name = @"Russia"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 33000,
            BirthRate = 8.2,
            DeathRate = 7.1,
            Name = @"San Marino"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 8877000,
            BirthRate = 9.3,
            DeathRate = 14.6,
            Name = @"Serbia"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 5436000,
            BirthRate = 10.3,
            DeathRate = 9.9,
            Name = @"Slovakia"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 2071000,
            BirthRate = 10,
            DeathRate = 9.6,
            Name = @"Slovenia"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 46672000,
            BirthRate = 9,
            DeathRate = 9.1,
            Name = @"Spain"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 9765000,
            BirthRate = 11.7,
            DeathRate = 9.3,
            Name = @"Sweden"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 8297000,
            BirthRate = 10.5,
            DeathRate = 8.2,
            Name = @"Switzerland"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 44922000,
            BirthRate = 10.7,
            DeathRate = 14.9,
            Name = @"Ukraine"
        });
        this.Add(new CountryDemographicEuropeItem()
        {
            Population = 65860000,
            BirthRate = 11.9,
            DeathRate = 9.2,
            Name = @"United Kingdom"
        });
    }
}
csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Population Statistics for Selected Continents
    </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"
            Title="Death Rate (per 1,000 people)"
            MinimumValue="5"
            MaximumValue="15">
            </IgbNumericXAxis>

            <IgbNumericYAxis
            Name="yAxis"
            @ref="yAxis"
            Title="Birth Rate (per 1,000 people)"
            MinimumValue="0"
            MaximumValue="50"
            Interval="10">
            </IgbNumericYAxis>

            <IgbScatterSeries
            Name="scatterSeries1"
            @ref="scatterSeries1"
            Title="Europe"
            XAxisName="xAxis"
            YAxisName="yAxis"
            XMemberPath="DeathRate"
            YMemberPath="BirthRate"
            DataSource="CountryDemographicEurope"
            MarkerType="MarkerType.Circle"
            ShowDefaultTooltip="true">
            </IgbScatterSeries>

            <IgbScatterSeries
            Name="scatterSeries2"
            @ref="scatterSeries2"
            Title="Africa"
            XAxisName="xAxis"
            YAxisName="yAxis"
            XMemberPath="DeathRate"
            YMemberPath="BirthRate"
            DataSource="CountryDemographicAfrican"
            MarkerType="MarkerType.Circle"
            ShowDefaultTooltip="true">
            </IgbScatterSeries>

        </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 scatterSeries1 = this.scatterSeries1;
        var scatterSeries2 = this.scatterSeries2;

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

    }

    private IgbLegend legend;
    private IgbDataChart chart;
    private IgbNumericXAxis xAxis;
    private IgbNumericYAxis yAxis;
    private IgbScatterSeries scatterSeries1;
    private IgbScatterSeries scatterSeries2;

    private CountryDemographicEurope _countryDemographicEurope = null;
    public CountryDemographicEurope CountryDemographicEurope
    {
        get
        {
            if (_countryDemographicEurope == null)
            {
                _countryDemographicEurope = new CountryDemographicEurope();
            }
            return _countryDemographicEurope;
        }
    }

    private CountryDemographicAfrican _countryDemographicAfrican = null;
    public CountryDemographicAfrican CountryDemographicAfrican
    {
        get
        {
            if (_countryDemographicAfrican == null)
            {
                _countryDemographicAfrican = new CountryDemographicAfrican();
            }
            return _countryDemographicAfrican;
        }
    }

}razorコピー

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

このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

Blazor 散布折れ線チャート

Blazor は、直線で接続されたマーカーのコレクションとして描画され、各マーカーにはデカルト座標系での位置を決定する X/Y の数値のペアがあります。IgbDataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgbScatterLineSeries にバインドします:

EXAMPLE

MODULES

DATA

RAZOR

CSS

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),
                typeof(IgbDataChartAnnotationModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

// NOTE this file contains multiple data sources:


// Data Source #1
using System;
using System.Collections.Generic;
public class HealthDataForFranceItem
{
    public double Year { get; set; }
    public double HealthExpense { get; set; }
    public double LifeExpectancy { get; set; }
    public string Name { get; set; }
}

public class HealthDataForFrance
    : List<HealthDataForFranceItem>
{
    public HealthDataForFrance()
    {
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1985,
            HealthExpense = 2025.98,
            LifeExpectancy = 75.92,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1986,
            HealthExpense = 2075.21,
            LifeExpectancy = 76.24,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1987,
            HealthExpense = 2140.51,
            LifeExpectancy = 76.08,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1988,
            HealthExpense = 2119.07,
            LifeExpectancy = 76.22,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1989,
            HealthExpense = 2112.67,
            LifeExpectancy = 76.5,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1990,
            HealthExpense = 2519.81,
            LifeExpectancy = 76.54,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1991,
            HealthExpense = 2660.33,
            LifeExpectancy = 76.98,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1992,
            HealthExpense = 2737.93,
            LifeExpectancy = 77.18,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1993,
            HealthExpense = 2761.36,
            LifeExpectancy = 77.15,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1994,
            HealthExpense = 2800.17,
            LifeExpectancy = 77.69,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1995,
            HealthExpense = 2863.39,
            LifeExpectancy = 77.74,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1996,
            HealthExpense = 3034.79,
            LifeExpectancy = 78.15,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1997,
            HealthExpense = 3426.25,
            LifeExpectancy = 78.14,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1998,
            HealthExpense = 3639.47,
            LifeExpectancy = 78.33,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1999,
            HealthExpense = 3826.04,
            LifeExpectancy = 78.28,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2000,
            HealthExpense = 4003.97,
            LifeExpectancy = 78.63,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2001,
            HealthExpense = 4139.3,
            LifeExpectancy = 78.79,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2002,
            HealthExpense = 4504.06,
            LifeExpectancy = 78.99,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2003,
            HealthExpense = 4633.59,
            LifeExpectancy = 79.39,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2004,
            HealthExpense = 4734.15,
            LifeExpectancy = 79.84,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2005,
            HealthExpense = 4822.75,
            LifeExpectancy = 80.04,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2006,
            HealthExpense = 4846.36,
            LifeExpectancy = 80.34,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2007,
            HealthExpense = 4965.14,
            LifeExpectancy = 80.4,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2008,
            HealthExpense = 5149.6,
            LifeExpectancy = 80.59,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2009,
            HealthExpense = 5254.08,
            LifeExpectancy = 80.8,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2010,
            HealthExpense = 5240.42,
            LifeExpectancy = 81,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2011,
            HealthExpense = 5387.98,
            LifeExpectancy = 81.3,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2012,
            HealthExpense = 5499.09,
            LifeExpectancy = 81.45,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2013,
            HealthExpense = 5557.2,
            LifeExpectancy = 81.75,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2014,
            HealthExpense = 5730.16,
            LifeExpectancy = 82.1,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2015,
            HealthExpense = 5926.44,
            LifeExpectancy = 82.3,
            Name = @"Norway"
        });
    }
}


// Data Source #2
using System;
using System.Collections.Generic;
public class HealthDataForGermanyItem
{
    public double Year { get; set; }
    public double HealthExpense { get; set; }
    public double LifeExpectancy { get; set; }
    public string Name { get; set; }
}

public class HealthDataForGermany
    : List<HealthDataForGermanyItem>
{
    public HealthDataForGermany()
    {
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1985,
            HealthExpense = 2579.64,
            LifeExpectancy = 74.05,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1986,
            HealthExpense = 2603.94,
            LifeExpectancy = 74.31,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1987,
            HealthExpense = 2668.49,
            LifeExpectancy = 74.56,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1988,
            HealthExpense = 2812.94,
            LifeExpectancy = 74.79,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1989,
            HealthExpense = 2689.51,
            LifeExpectancy = 75.01,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1990,
            HealthExpense = 2774.68,
            LifeExpectancy = 75.23,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1992,
            HealthExpense = 2909.85,
            LifeExpectancy = 75.82,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1993,
            HealthExpense = 2853.09,
            LifeExpectancy = 75.87,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1994,
            HealthExpense = 2989.64,
            LifeExpectancy = 76.27,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1995,
            HealthExpense = 3122.13,
            LifeExpectancy = 76.42,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1996,
            HealthExpense = 3241.89,
            LifeExpectancy = 76.67,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1997,
            HealthExpense = 3257.29,
            LifeExpectancy = 77.07,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1998,
            HealthExpense = 3327.26,
            LifeExpectancy = 77.48,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1999,
            HealthExpense = 3414.57,
            LifeExpectancy = 77.73,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2000,
            HealthExpense = 3536.35,
            LifeExpectancy = 77.93,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2001,
            HealthExpense = 3603.77,
            LifeExpectancy = 78.33,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2002,
            HealthExpense = 3687.38,
            LifeExpectancy = 78.23,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2003,
            HealthExpense = 3745.14,
            LifeExpectancy = 78.38,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2004,
            HealthExpense = 3704.96,
            LifeExpectancy = 78.68,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2005,
            HealthExpense = 3787.13,
            LifeExpectancy = 78.93,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2006,
            HealthExpense = 3875.14,
            LifeExpectancy = 79.13,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2007,
            HealthExpense = 3950.17,
            LifeExpectancy = 79.53,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2008,
            HealthExpense = 4079.09,
            LifeExpectancy = 79.74,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2009,
            HealthExpense = 4232.58,
            LifeExpectancy = 79.84,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2010,
            HealthExpense = 4358.61,
            LifeExpectancy = 79.99,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2011,
            HealthExpense = 4396.44,
            LifeExpectancy = 80.44,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2012,
            HealthExpense = 4516.99,
            LifeExpectancy = 80.54,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2013,
            HealthExpense = 4589.37,
            LifeExpectancy = 80.49,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2014,
            HealthExpense = 4684.49,
            LifeExpectancy = 81.09,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2015,
            HealthExpense = 4772.33,
            LifeExpectancy = 80.64,
            Name = @"Germany"
        });
    }
}
csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Life Expectancy vs Health Expenditure
    </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"
            Title="Life Expectancy (in years)"
            MinimumValue="72"
            MaximumValue="84"
            Interval="2">
            </IgbNumericXAxis>

            <IgbNumericYAxis
            Name="yAxis"
            @ref="yAxis"
            Title="Health Expenditure per Capita"
            AbbreviateLargeNumbers="true"
            MinimumValue="1000"
            MaximumValue="6000"
            Interval="1000">
            </IgbNumericYAxis>

            <IgbScatterLineSeries
            Name="ScatterLineSeries1"
            @ref="scatterLineSeries1"
            Title="Germany"
            XAxisName="xAxis"
            YAxisName="yAxis"
            XMemberPath="LifeExpectancy"
            YMemberPath="HealthExpense"
            DataSource="HealthDataForGermany"
            MarkerType="MarkerType.Circle"
            ShowDefaultTooltip="true">
            </IgbScatterLineSeries>

            <IgbScatterLineSeries
            Name="ScatterLineSeries2"
            @ref="scatterLineSeries2"
            Title="France"
            XAxisName="xAxis"
            YAxisName="yAxis"
            XMemberPath="LifeExpectancy"
            YMemberPath="HealthExpense"
            DataSource="HealthDataForFrance"
            MarkerType="MarkerType.Circle"
            ShowDefaultTooltip="true">
            </IgbScatterLineSeries>

            <IgbDataToolTipLayer
            Name="dataToolTipLayer"
            @ref="dataToolTipLayer">
            </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 scatterLineSeries1 = this.scatterLineSeries1;
        var scatterLineSeries2 = this.scatterLineSeries2;
        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 IgbScatterLineSeries scatterLineSeries1;
    private IgbScatterLineSeries scatterLineSeries2;
    private IgbDataToolTipLayer dataToolTipLayer;

    private HealthDataForGermany _healthDataForGermany = null;
    public HealthDataForGermany HealthDataForGermany
    {
        get
        {
            if (_healthDataForGermany == null)
            {
                _healthDataForGermany = new HealthDataForGermany();
            }
            return _healthDataForGermany;
        }
    }

    private HealthDataForFrance _healthDataForFrance = null;
    public HealthDataForFrance HealthDataForFrance
    {
        get
        {
            if (_healthDataForFrance == null)
            {
                _healthDataForFrance = new HealthDataForFrance();
            }
            return _healthDataForFrance;
        }
    }

}razorコピー

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

Blazor 散布スプライン チャート

Blazor は、曲線スプラインで接続されたマーカーのコレクションとして描画され、各マーカーにはデカルト座標系での位置を決定する X/Y の数値のペアがあります。IgbDataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgbScatterSplineSeries にバインドします:

EXAMPLE

MODULES

DATA

RAZOR

CSS

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),
                typeof(IgbDataChartAnnotationModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

// NOTE this file contains multiple data sources:


// Data Source #1
using System;
using System.Collections.Generic;
public class HealthDataForFranceItem
{
    public double Year { get; set; }
    public double HealthExpense { get; set; }
    public double LifeExpectancy { get; set; }
    public string Name { get; set; }
}

public class HealthDataForFrance
    : List<HealthDataForFranceItem>
{
    public HealthDataForFrance()
    {
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1985,
            HealthExpense = 2025.98,
            LifeExpectancy = 75.92,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1986,
            HealthExpense = 2075.21,
            LifeExpectancy = 76.24,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1987,
            HealthExpense = 2140.51,
            LifeExpectancy = 76.08,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1988,
            HealthExpense = 2119.07,
            LifeExpectancy = 76.22,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1989,
            HealthExpense = 2112.67,
            LifeExpectancy = 76.5,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1990,
            HealthExpense = 2519.81,
            LifeExpectancy = 76.54,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1991,
            HealthExpense = 2660.33,
            LifeExpectancy = 76.98,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1992,
            HealthExpense = 2737.93,
            LifeExpectancy = 77.18,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1993,
            HealthExpense = 2761.36,
            LifeExpectancy = 77.15,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1994,
            HealthExpense = 2800.17,
            LifeExpectancy = 77.69,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1995,
            HealthExpense = 2863.39,
            LifeExpectancy = 77.74,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1996,
            HealthExpense = 3034.79,
            LifeExpectancy = 78.15,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1997,
            HealthExpense = 3426.25,
            LifeExpectancy = 78.14,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1998,
            HealthExpense = 3639.47,
            LifeExpectancy = 78.33,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 1999,
            HealthExpense = 3826.04,
            LifeExpectancy = 78.28,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2000,
            HealthExpense = 4003.97,
            LifeExpectancy = 78.63,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2001,
            HealthExpense = 4139.3,
            LifeExpectancy = 78.79,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2002,
            HealthExpense = 4504.06,
            LifeExpectancy = 78.99,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2003,
            HealthExpense = 4633.59,
            LifeExpectancy = 79.39,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2004,
            HealthExpense = 4734.15,
            LifeExpectancy = 79.84,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2005,
            HealthExpense = 4822.75,
            LifeExpectancy = 80.04,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2006,
            HealthExpense = 4846.36,
            LifeExpectancy = 80.34,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2007,
            HealthExpense = 4965.14,
            LifeExpectancy = 80.4,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2008,
            HealthExpense = 5149.6,
            LifeExpectancy = 80.59,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2009,
            HealthExpense = 5254.08,
            LifeExpectancy = 80.8,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2010,
            HealthExpense = 5240.42,
            LifeExpectancy = 81,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2011,
            HealthExpense = 5387.98,
            LifeExpectancy = 81.3,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2012,
            HealthExpense = 5499.09,
            LifeExpectancy = 81.45,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2013,
            HealthExpense = 5557.2,
            LifeExpectancy = 81.75,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2014,
            HealthExpense = 5730.16,
            LifeExpectancy = 82.1,
            Name = @"Norway"
        });
        this.Add(new HealthDataForFranceItem()
        {
            Year = 2015,
            HealthExpense = 5926.44,
            LifeExpectancy = 82.3,
            Name = @"Norway"
        });
    }
}


// Data Source #2
using System;
using System.Collections.Generic;
public class HealthDataForGermanyItem
{
    public double Year { get; set; }
    public double HealthExpense { get; set; }
    public double LifeExpectancy { get; set; }
    public string Name { get; set; }
}

public class HealthDataForGermany
    : List<HealthDataForGermanyItem>
{
    public HealthDataForGermany()
    {
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1985,
            HealthExpense = 2579.64,
            LifeExpectancy = 74.05,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1986,
            HealthExpense = 2603.94,
            LifeExpectancy = 74.31,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1987,
            HealthExpense = 2668.49,
            LifeExpectancy = 74.56,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1988,
            HealthExpense = 2812.94,
            LifeExpectancy = 74.79,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1989,
            HealthExpense = 2689.51,
            LifeExpectancy = 75.01,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1990,
            HealthExpense = 2774.68,
            LifeExpectancy = 75.23,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1992,
            HealthExpense = 2909.85,
            LifeExpectancy = 75.82,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1993,
            HealthExpense = 2853.09,
            LifeExpectancy = 75.87,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1994,
            HealthExpense = 2989.64,
            LifeExpectancy = 76.27,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1995,
            HealthExpense = 3122.13,
            LifeExpectancy = 76.42,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1996,
            HealthExpense = 3241.89,
            LifeExpectancy = 76.67,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1997,
            HealthExpense = 3257.29,
            LifeExpectancy = 77.07,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1998,
            HealthExpense = 3327.26,
            LifeExpectancy = 77.48,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 1999,
            HealthExpense = 3414.57,
            LifeExpectancy = 77.73,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2000,
            HealthExpense = 3536.35,
            LifeExpectancy = 77.93,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2001,
            HealthExpense = 3603.77,
            LifeExpectancy = 78.33,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2002,
            HealthExpense = 3687.38,
            LifeExpectancy = 78.23,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2003,
            HealthExpense = 3745.14,
            LifeExpectancy = 78.38,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2004,
            HealthExpense = 3704.96,
            LifeExpectancy = 78.68,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2005,
            HealthExpense = 3787.13,
            LifeExpectancy = 78.93,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2006,
            HealthExpense = 3875.14,
            LifeExpectancy = 79.13,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2007,
            HealthExpense = 3950.17,
            LifeExpectancy = 79.53,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2008,
            HealthExpense = 4079.09,
            LifeExpectancy = 79.74,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2009,
            HealthExpense = 4232.58,
            LifeExpectancy = 79.84,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2010,
            HealthExpense = 4358.61,
            LifeExpectancy = 79.99,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2011,
            HealthExpense = 4396.44,
            LifeExpectancy = 80.44,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2012,
            HealthExpense = 4516.99,
            LifeExpectancy = 80.54,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2013,
            HealthExpense = 4589.37,
            LifeExpectancy = 80.49,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2014,
            HealthExpense = 4684.49,
            LifeExpectancy = 81.09,
            Name = @"Germany"
        });
        this.Add(new HealthDataForGermanyItem()
        {
            Year = 2015,
            HealthExpense = 4772.33,
            LifeExpectancy = 80.64,
            Name = @"Germany"
        });
    }
}
csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Life Expectancy vs Health Expenditure
    </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"
            Title="Life Expectancy (in years)"
            MinimumValue="72"
            MaximumValue="84"
            Interval="2">
            </IgbNumericXAxis>

            <IgbNumericYAxis
            Name="yAxis"
            @ref="yAxis"
            Title="Health Expenditure per Capita"
            AbbreviateLargeNumbers="true"
            MinimumValue="1000"
            MaximumValue="6000"
            Interval="1000">
            </IgbNumericYAxis>

            <IgbScatterSplineSeries
            Name="scatterSplineSeries1"
            @ref="scatterSplineSeries1"
            Title="Germany"
            XAxisName="xAxis"
            YAxisName="yAxis"
            XMemberPath="LifeExpectancy"
            YMemberPath="HealthExpense"
            DataSource="HealthDataForGermany"
            MarkerType="MarkerType.Circle"
            ShowDefaultTooltip="true">
            </IgbScatterSplineSeries>

            <IgbScatterSplineSeries
            Name="scatterSplineSeries2"
            @ref="scatterSplineSeries2"
            Title="France"
            XAxisName="xAxis"
            YAxisName="yAxis"
            XMemberPath="LifeExpectancy"
            YMemberPath="HealthExpense"
            DataSource="HealthDataForFrance"
            MarkerType="MarkerType.Circle"
            ShowDefaultTooltip="true">
            </IgbScatterSplineSeries>

            <IgbDataToolTipLayer
            Name="dataToolTipLayer"
            @ref="dataToolTipLayer">
            </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 scatterSplineSeries1 = this.scatterSplineSeries1;
        var scatterSplineSeries2 = this.scatterSplineSeries2;
        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 IgbScatterSplineSeries scatterSplineSeries1;
    private IgbScatterSplineSeries scatterSplineSeries2;
    private IgbDataToolTipLayer dataToolTipLayer;

    private HealthDataForGermany _healthDataForGermany = null;
    public HealthDataForGermany HealthDataForGermany
    {
        get
        {
            if (_healthDataForGermany == null)
            {
                _healthDataForGermany = new HealthDataForGermany();
            }
            return _healthDataForGermany;
        }
    }

    private HealthDataForFrance _healthDataForFrance = null;
    public HealthDataForFrance HealthDataForFrance
    {
        get
        {
            if (_healthDataForFrance == null)
            {
                _healthDataForFrance = new HealthDataForFrance();
            }
            return _healthDataForFrance;
        }
    }

}razorコピー

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

Blazor 散布高密度チャート

Blazor 散布高密度 (HD) チャートを使用して、わずかな読み込み時間で数千から数百万のデータ ポイントに及ぶ散布データをバインドして表示します。このチャート タイプは非常に多くのポイント用に設計されているため、フル サイズのマーカーではなく小さな点として視覚化され、データ ポイントのクラスターを表すより高い色密度を使用してデータが最も多い領域を表示します。IgbDataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgbHighDensityScatterSeries にバインドします:

EXAMPLE

MODULES

DATA

RAZOR

CSS

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(IgbDataChartScatterCoreModule),
                typeof(IgbDataChartScatterModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbNumberAbbreviatorModule),
                typeof(IgbHighDensityScatterSeriesModule),
                typeof(IgbNumericYAxisModule),
                typeof(IgbNumericXAxisModule)
);
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections.Generic;

namespace Infragistics.Samples
{
    public class SampleDensityData
    {
        public static Random random = new Random();

        public static List<SampleDensityPoint> Create()
        {
            var amount = 25000;
            var data = new List<SampleDensityPoint>();
            generate(data, amount / 2, 0, 0, 75000, 20000);
            generate(data, amount / 4, 0, 0, 100000, 25000);
            generate(data, amount / 8, 0, 0, 150000, 30000);
            generate(data, amount / 8, 0, 0, 200000, 75000);

            return data;
        }

        public static void generate(
            List<SampleDensityPoint> data, int count,
            int centerX, int centerY, int spreadX, int spreadY) {

            for (var i = 0; i <= count; i++)
            {
                var rangeX = random.NextDouble() * spreadX;
                var rangeY = random.NextDouble() * spreadY;
                var prop = random.NextDouble();
                var flip = 1;

                if (prop < .25) {
                    rangeX *= flip;
                    rangeY *= flip;
                }
                else if (prop >= .25 && prop < .5) {
                    rangeX *= -flip;
                    rangeY *= flip;
                }
                else if (prop >= .5 && prop < .75) {
                    rangeX *= flip;
                    rangeY *= -flip;
                }
                else {
                    rangeX *= -flip;
                    rangeY *= -flip;
                }

                var dispersionX = random.NextDouble() + 0.12;
                var dispersionY = random.NextDouble() + 0.12;
                var x = Math.Round(centerX + (rangeX * dispersionX));
                var y = Math.Round(centerY + (rangeY * dispersionY));

                data.Add(new SampleDensityPoint { X = x, Y = y });
            }
        }
    }

    public class SampleDensityPoint
    {
        public double X { get; set; }
        public double Y { get; set; }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">

        <div class="options vertical">
            <span class="legend-title">Stars Distribution in Milky Way Galaxy</span>
        </div>

        @if (Data != null)
        {
            <IgbDataChart Height="100%" Width="100%"
                              IsHorizontalZoomEnabled="true"
                              IsVerticalZoomEnabled="true">
                <IgbNumericXAxis Name="xAxis"
                              AbbreviateLargeNumbers="true"
                              TitleBottomMargin="10"
                              Title="Plane of Rotation (in Light Years)">
                </IgbNumericXAxis>
                <IgbNumericYAxis Name="yAxis"
                              AbbreviateLargeNumbers="true"
                              TitleLeftMargin="10"
                              Title="Vertical Plane (in Light Years)">
                </IgbNumericYAxis>
                <IgbHighDensityScatterSeries XAxisName="xAxis"
                                          YAxisName="yAxis"
                                          Title="Distribution"
                                          DataSource="Data"
                                          XMemberPath="X"
                                          YMemberPath="Y"
                                          ShowDefaultTooltip="true"
                                          MouseOverEnabled="true"
                                          ProgressiveLoad="true"
                                          HeatMinimumColor="Black"
                                          HeatMaximumColor="Yellow"
                                          HeatMaximum="1"
                                          HeatMinimum="5"
                                          Resolution="3">
                </IgbHighDensityScatterSeries>
            </IgbDataChart>
        }
    </div>
</div>

@code {

    private List<SampleDensityPoint> Data;

    protected override void OnInitialized()
    {

        Data = SampleDensityData.Create();
    }
}razorコピー

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

Blazor 散布エリア チャート

Blazor 散布エリア チャートは各ポイントに割り当てられた数値を使って、X および Y データの三角形分割に基づいて、色付きのサーフェスを描画します。このチャートはヒート マップ、磁場の強さ、またはオフィスの Wi-Fi の強さを描画する場合などに便利です。IgbDataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgbScatterAreaSeries にバインドします:

EXAMPLE

MODULES

DATA

RAZOR

CSS

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(IgbDataChartCoreModule),
                typeof(IgbDataChartScatterCoreModule),
                typeof(IgbDataChartScatterModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbScatterAreaSeriesModule),
                typeof(IgbCustomPaletteColorScaleModule)
);
            await builder.Build().RunAsync();
        }
    }
}csコピー

using IgniteUI.Blazor.Controls;
using System;
using System.Collections.Generic;
using System.ComponentModel;

namespace Infragistics.Samples
{
    public class SampleScatterData
    {
        public static List<SampleScatterPoint> Create()
        {
            var data = new List<SampleScatterPoint>();
            var xMin = -180;
            var xMax = 180;
            var yMin = -90;
            var yMax = 90;
            var xCount = 11;
            var yCount = 11;

            var xStep = (xMax - xMin) / (xCount - 1);
            var yStep = (yMax - yMin) / (yCount - 1);
            var index = 0;
            for (var x = xMin; x <= xMax; x += xStep)
            {
                for (var y = yMin; y <= yMax; y += yStep)
                {
                    var z = Math.Cos(x) + Math.Cos(y);
                    var p = new SampleScatterPoint { X = x, Y = y, Z = z, Index = index++ };
                    data.Add(p);

                }
            }
            return data;
        }

        public static List<SampleScatterPoint> CreateWaveData()
        {
            var data = new List<SampleScatterPoint>();
            int index = 0;

            for (int angle =0; angle <=360; angle += 10)
            {
                double radians = (angle * Math.PI) / 180;
                double sin = Math.Sin(radians);
                double cos = Math.Cos(radians);

                data.Add(new SampleScatterPoint()
                {
                    Angle = angle,
                    SinValue = sin,
                    CosValue = cos,
                    Index = index++,
                    Label = sin.ToString("N2")
                });
            }

            return data;
        }
    }

    public class SampleScatterPoint
    {
        public string Label { get; set; }
        public double X { get; set; }
        public double Y { get; set; }
        public double Z { get; set; }
        public double Index { get; set; }
        public double Angle { get; set; }
        public double SinValue { get; set; }
        public double CosValue { get; set; }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">

        <div class="options vertical">
            <span class="legend-title">Distribution of Magnetic Field</span>
        </div>

        @if (Data != null)
        {
        <IgbDataChart Height="100%" Width="100%"
                   GridMode="@GridMode.BeforeSeries"
                   IsHorizontalZoomEnabled="false"
                   IsVerticalZoomEnabled="false">

            @* primary axes required for scatter-contour-series *@
            <IgbNumericXAxis Name="xAxis1" LabelLocation="AxisLabelsLocation.OutsideBottom"  Title="Longitude" MinimumValue="-180" MaximumValue="180" />
            <IgbNumericYAxis Name="yAxis1" LabelLocation="AxisLabelsLocation.OutsideLeft" Title="Latitude"  MinimumValue="-90" MaximumValue="90"/>

            @* optional axes that provide more context for displayed data *@
            <IgbNumericXAxis Name="xAxis2" LabelLocation="AxisLabelsLocation.OutsideTop"  Title="Longitude" MinimumValue="-180" MaximumValue="180" />
            <IgbNumericYAxis Name="yAxis2" LabelLocation="AxisLabelsLocation.OutsideRight" Title="Latitude"  MinimumValue="-90" MaximumValue="90"/>

            <IgbScatterAreaSeries XAxisName="xAxis1"
                               YAxisName="yAxis1"
                               DataSource="Data"
                               XMemberPath="X"
                               YMemberPath="Y"
                               ColorMemberPath="Z"
                               ColorScale="@ColorScale"
                               ShowDefaultTooltip="true">
            </IgbScatterAreaSeries>

        </IgbDataChart>
        }
    </div>
</div>

@code {

    private List<SampleScatterPoint> Data;
    private IgbCustomPaletteColorScale ColorScale;

    protected override void OnInitialized()
    {

        this.ColorScale = new IgbCustomPaletteColorScale();
        this.ColorScale.InterpolationMode = ColorScaleInterpolationMode.InterpolateHSV;
        this.ColorScale.MinimumValue = - 2;
        this.ColorScale.MaximumValue = 2;
        this.ColorScale.Palette = "#8670CB, #4AC4FF, #B5CC2E, #FC8612, #ED4840";

        Data = SampleScatterData.Create();

    }
}razorコピー

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

Blazor 散布等高線チャート

Blazor 散布等高線チャートは、X データと Y データの三角形分割に基づいて、各ポイントに数値データ値が割り当てられた色付きの等高線を描画します。このチャートはヒート マップ、磁場の強さ、またはオフィスの Wi-Fi の強さを描画する場合などに便利です。IgbDataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgbScatterContourSeries にバインドします:

EXAMPLE

MODULES

DATA

RAZOR

CSS

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(IgbDataChartCoreModule),
                typeof(IgbDataChartScatterCoreModule),
                typeof(IgbDataChartScatterModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbScatterContourSeriesModule),
                typeof(IgbValueBrushScaleModule),
                typeof(IgbLinearContourValueResolverModule)
);
            await builder.Build().RunAsync();
        }
    }
}csコピー

using IgniteUI.Blazor.Controls;
using System;
using System.Collections.Generic;
using System.ComponentModel;

namespace Infragistics.Samples
{
    public class SampleScatterData
    {
        public static List<SampleScatterPoint> Create()
        {
            var data = new List<SampleScatterPoint>();
            var xMin = -180;
            var xMax = 180;
            var yMin = -90;
            var yMax = 90;
            var xCount = 11;
            var yCount = 11;

            var xStep = (xMax - xMin) / (xCount - 1);
            var yStep = (yMax - yMin) / (yCount - 1);
            var index = 0;
            for (var x = xMin; x <= xMax; x += xStep)
            {
                for (var y = yMin; y <= yMax; y += yStep)
                {
                    var z = Math.Cos(x) + Math.Cos(y);
                    var p = new SampleScatterPoint { X = x, Y = y, Z = z, Index = index++ };
                    data.Add(p);

                }
            }
            return data;
        }

        public static List<SampleScatterPoint> CreateWaveData()
        {
            var data = new List<SampleScatterPoint>();
            int index = 0;

            for (int angle =0; angle <=360; angle += 10)
            {
                double radians = (angle * Math.PI) / 180;
                double sin = Math.Sin(radians);
                double cos = Math.Cos(radians);

                data.Add(new SampleScatterPoint()
                {
                    Angle = angle,
                    SinValue = sin,
                    CosValue = cos,
                    Index = index++,
                    Label = sin.ToString("N2")
                });
            }

            return data;
        }
    }

    public class SampleScatterPoint
    {
        public string Label { get; set; }
        public double X { get; set; }
        public double Y { get; set; }
        public double Z { get; set; }
        public double Index { get; set; }
        public double Angle { get; set; }
        public double SinValue { get; set; }
        public double CosValue { get; set; }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">

        <div class="options vertical">
            <span class="legend-title">Distribution of Magnetic Field</span>
        </div>

        @if (Data != null)
        {
            <IgbDataChart Height="100%" Width="100%"
                       GridMode="@GridMode.BeforeSeries"
                       IsHorizontalZoomEnabled="true"
                       IsVerticalZoomEnabled="true">

                @* primary axes required for scatter-contour-series *@
                <IgbNumericXAxis Name="xAxis1" LabelLocation="AxisLabelsLocation.OutsideBottom"  Title="Longitude" MinimumValue="-180" MaximumValue="180" />
                <IgbNumericYAxis Name="yAxis1" LabelLocation="AxisLabelsLocation.OutsideLeft" Title="Latitude"  MinimumValue="-90" MaximumValue="90"/>

                @* optional axes that provide more context for displayed data *@
                <IgbNumericXAxis Name="xAxis2" LabelLocation="AxisLabelsLocation.OutsideTop"  Title="Longitude" MinimumValue="-180" MaximumValue="180" />
                <IgbNumericYAxis Name="yAxis2" LabelLocation="AxisLabelsLocation.OutsideRight" Title="Latitude"  MinimumValue="-90" MaximumValue="90"/>

                <IgbScatterContourSeries XAxisName="xAxis1"
                                      YAxisName="yAxis1"
                                      DataSource="Data"
                                      XMemberPath="X"
                                      YMemberPath="Y"
                                      Thickness="2"
                                      ValueMemberPath="Z"
                                      FillScale="@BrushScale"
                                      ShowDefaultTooltip="true">
                </IgbScatterContourSeries>

            </IgbDataChart>
        }
    </div>
</div>

@code {

    private List<SampleScatterPoint> Data;
    private IgbValueBrushScale BrushScale;

    protected override void OnInitialized()
    {

        this.BrushScale = new IgbValueBrushScale();
        this.BrushScale.MinimumValue = - 2;
        this.BrushScale.MaximumValue = 2;
        this.BrushScale.Brushes = "#8670CB, #4AC4FF, #B5CC2E, #FC8612, #ED4840";

        Data = SampleScatterData.Create();

    }
}razorコピー

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

その他のリソース

関連するチャートタイプの詳細については、以下のトピックを参照してください。

• エリア チャート
• バブル チャート
• 折れ線チャート
• スプライン チャート
• シェープ チャート

API リファレンス

以下のテーブルは、上記のセクションで説明した API メンバーをリストします。

チャート タイプ	コントロール名	API メンバー
散布マーカー	IgbDataChart	IgbScatterSeries
散布折れ線	IgbDataChart	IgbScatterLineSeries
散布スプライン	IgbDataChart	IgbScatterSplineSeries
高密度散布	IgbDataChart	IgbHighDensityScatterSeries
散布エリア	IgbDataChart	IgbScatterAreaSeries
散布等高線	IgbDataChart	IgbScatterContourSeries