Blazor チャート

Blazor カテゴリチャートコンポーネントは、カテゴリデータの可視化を容易にする Ignite UI for Blazor チャートコンポーネントです。データ可視化ドメインの複雑さを管理しやすい API に簡素化できます。

Blazor チャートの例

ユーザーがデータのコレクョンまたはコレクショングループにバインドしてデータを指定するプロパティを設定後、あとの作業はチャートコントロールによって処理されます。Blazor コンポーネントはデータを解析し、データを表すための最適なチャートタイプを自動的に選択します。

スマートデータアダプターは、データを分析して適切なビジュアライゼーションを描画します。たとえば、ChartType プロパティが Auto に設定される場合、コントロールは小さいデータセットのために縦棒チャートを使用し、より大きいデータセットのために折れ線チャートを使用します。

ただし、ChartType を明示的に以下に設定してチャートタイプを指定することもできます。

Line
Area
Column
Point
Spline
SplineArea
StepArea
StepLine
Waterfall

その他の Blazor カテゴリチャートコンポーネントの直感的な動作の例として、明示的にラベルを設定する必要がないことがあります。カテゴリチャートは、提供したデータ内で最初の適切な文字列プロパティを使用し、ラベルに使用します。

モジュールの要件

CategoryChart は以下のモジュールを要求します。

CategoryChartModule.Register(IgniteUIBlazor);

カテゴリチャートのより最小限の設定をロードすることも可能で、それによって可能なシリーズのサブセットだけをロードし、代わりに CategoryChartCoreModule や LineSeriesDynamicModule など問題のシリーズの動的モジュールをロードして除外します。ChartType が Auto の場合、読み込んだシリーズ型が選択されます。

使用方法

カテゴリチャートモジュールをインポートした後、チャートをデータにバインドします。

Blazor カテゴリチャートコンポーネントを作成するには、はじめにデータをバインドする必要があります。以下のコードスニペットは、シンプルなデータソースを作成する方法を示します。

public class Country
{
    public string CountryName { get; set; }
    public int Pop1995 { get; set; }
    public int Pop2005 { get; set; }
    public int Pop2015 { get; set; }
    public int Pop2025 { get; set; }
}

public static class CountryData
{
    public static List<Country> Create()
    {
        var countries = new List<Country>();
        Country china = new Country
        {
            CountryName = "China",
            Pop1995 = 1216,
            Pop2005 = 1297,
            Pop2015 = 1361,
            Pop2025 = 1394
        };
        Country india = new Country
        {
            CountryName = "India",
            Pop1995 = 920,
            Pop2005 = 1090,
            Pop2015 = 1251,
            Pop2025 = 1396
        };
        Country usa = new Country
        {
            CountryName = "United States",
            Pop1995 = 266,
            Pop2005 = 295,
            Pop2015 = 322,
            Pop2025 = 351
        };
        Country indonesia = new Country
        {
            CountryName = "Indonesia",
            Pop1995 = 197,
            Pop2005 = 229,
            Pop2015 = 256,
            Pop2025 = 277
        };
        Country brazil = new Country
        {
            CountryName = "Brazil",
            Pop1995 = 161,
            Pop2005 = 186,
            Pop2015 = 204,
            Pop2025 = 218
        };
        countries.Add(china);
        countries.Add(india);
        countries.Add(usa);
        countries.Add(indonesia);
        countries.Add(brazil);
        return countries;
    }
}

以下のコードはカテゴリチャートを上記のデータにバインドします。

<CategoryChart DataSource="@DataSource"
    Width="700px"
    Height="500px"/>

@code {
    private List<Country> DataSource;

    protected override void OnInitialized()
    {
        base.OnInitialized();

        CategoryChartModule.Register(IgniteUIBlazor);
        this.DataSource = CountryData.Create();
    }
}

チャートタイプ

表示するチャート型を設定するために、カテゴリチャートのデフォルト動作をオーバーライドできます。これを実行するには、ChartType プロパティを設定します。以下は、Blazor カテゴリチャートでサポートされるすべてのタイプです。

Note

特別なケースにプロパティの Auto 設定があります。Auto を使用した場合、チャートがデータを分析し、最適なチャートタイプを割り当てます。

サポートされるチャートタイプ

タイプ	説明とプレビュー
`Auto`	チャートにバインドされたデータソースを分析する定義済みのデータアダプターからの提案に基づいてチャートタイプの自動選択を指定します。
`Line`	各データポイントにマーカーがあるカテゴリ折れ線シリーズを指定します。
`Area`	カテゴリエリアシリーズを指定します。
`Column`	各データポイントに垂直長方形があるカテゴリ縦棒チャートを指定します。
`Point`	各データポイントにマーカーがあるカテゴリポイントチャートを指定します。
`StepLine`	カテゴリステップ折れ線チャートを指定します。
`StepArea`	カテゴリステップエリアチャートを指定します。
`Spline`	各データポイントにマーカーがあるカテゴリスプライン折れ線チャートシリーズを指定します。
`SplineArea`	カテゴリスプラインエリアシリーズを指定します。
`Waterfall`	カテゴリウォーターフォールチャートを指定します。

Blazor チャート