Blazor 棒チャート

Ignite UI for Blazor 棒チャート、棒グラフ、または水平棒チャートは、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ高さで長さが異なる水平棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらは、時間の経過とともに、項目の価値の変化を示すのに理想的です。データは、チャートの左から右にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して表されます。棒チャートは縦棒チャートと非常によく似ていますが、棒チャートは時計回りに 90 度回転して描画されるため、向きが水平方向 (左から右) であり、縦棒チャートは垂直方向 (上下) です。

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

無料で試してみる

Blazor 棒チャートの例

次の例に示すように、データ ソースを複数の IgbBarSeries にバインドすることにより、IgbDataChart コントロールに Blazor 棒チャートを作成できます。

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

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 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コピー

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

棒チャートの推奨事項

Blazor 棒チャートはプロジェクトに適していますか?

Blazor 棒チャートには、データまたはデータを使用して正しいストーリーを伝える方法に基づいたいくつかの種類が含まれています:

• グループ化された棒チャート
• 積層型棒チャート
• 極座標型棒チャート
• 積層型 100 棒チャート

棒チャートのユースケース

チャートを選択するための一般的なユースケースはいくつかあります:

• 時間の経過に伴う傾向またはデータのカテゴリの数値の変化を表示したい場合
• 1 つ以上のデータ系列のデータ値を比較したい場合
• 部分と全体の比較を表示したい場合
• カテゴリの上位または下位のパーセンテージを表示したい場合
• サブカテゴリにグループ化された複数のデータ ポイントの分析 (積層型棒)

これらのユースケースは、一般的に次のシナリオで使用されます:

• セールス マネージメント
• インベントリ マネージメント
• 株価チャート
• 数値または時系列値を比較する任意の文字列値

棒チャートのベスト プラクティス

• 数値軸を 0 から開始します。
• 棒には単色を使用します。
• 各棒を区切るスペースが棒自体の幅の 1/2 であることを確認します。
• ランキング、または順序付けられたカテゴリ (項目) の比較は、昇順または降順でソートされていることを確認します。
• 読みやすくするために、Y 軸 (チャートの左側のラベル) のカテゴリ値を右揃えにします。

以下の場合に棒チャートを使用しないでください:

• データが多すぎるため、Y 軸がスペースに収まらないか、判読できません。
• 詳細な時系列分析が必要なときは、時系列を含む折れ線チャートを検討してください。

棒チャートのデータ構造:

• データ ソースはデータ項目の配列またはリストである必要があります。
• データ ソースに少なくとも 1 つのデータ項目を含む必要があります。
• リストには、少なくとも 1 つのデータ列 (文字列または日時) が含まれている必要があります。
• リストには、少なくとも 1 つの数値データ列が含まれている必要があります。

単一シリーズの Blazor 棒チャート

棒チャートは、カテゴリ シリーズのグループに属し、チャートの左から右へデータ ポイント値に向かって延びる四角形のコレクションを使用して描画されます。IgbDataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgbBarSeries にバインドします:

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

using System;
using System.Collections.Generic;
public class OnlineShoppingSearchesItem
{
    public double X { get; set; }
    public double Y { get; set; }
    public string Label { get; set; }
    public double Percent { get; set; }
    public string Shop { get; set; }
}

public class OnlineShoppingSearches
    : List<OnlineShoppingSearchesItem>
{
    public OnlineShoppingSearches()
    {
        this.Add(new OnlineShoppingSearchesItem()
        {
            X = 63,
            Y = 0,
            Label = @"63%",
            Percent = 63,
            Shop = @"Amazon"
        });
        this.Add(new OnlineShoppingSearchesItem()
        {
            X = 48,
            Y = 1,
            Label = @"48%",
            Percent = 48,
            Shop = @"Search Engines"
        });
        this.Add(new OnlineShoppingSearchesItem()
        {
            X = 33,
            Y = 2,
            Label = @"33%",
            Percent = 33,
            Shop = @"Retailer Sites"
        });
        this.Add(new OnlineShoppingSearchesItem()
        {
            X = 25,
            Y = 3,
            Label = @"25%",
            Percent = 25,
            Shop = @"Marketplaces"
        });
        this.Add(new OnlineShoppingSearchesItem()
        {
            X = 21,
            Y = 4,
            Label = @"21%",
            Percent = 21,
            Shop = @"Brand Website"
        });
        this.Add(new OnlineShoppingSearchesItem()
        {
            X = 10,
            Y = 5,
            Label = @"10%",
            Percent = 10,
            Shop = @"Comparison Sites"
        });
        this.Add(new OnlineShoppingSearchesItem()
        {
            X = 8,
            Y = 6,
            Label = @"8%",
            Percent = 8,
            Shop = @"Social Media"
        });
        this.Add(new OnlineShoppingSearchesItem()
        {
            X = 2,
            Y = 7,
            Label = @"2%",
            Percent = 2,
            Shop = @"Other"
        });
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Where Online Shoppers Start Their Search
    </div>
    <div class="container vertical fill">
        <IgbDataChart
        Name="Chart"
        @ref="chart"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false">
            <IgbCategoryYAxis
            Name="yAxis"
            @ref="yAxis"
            Label="Shop"
            UseEnhancedIntervalManagement="true"
            EnhancedIntervalPreferMoreCategoryLabels="true"
            DataSource="OnlineShoppingSearches"
            IsInverted="true"
            Gap="0.5"
            Overlap="-0.1">
            </IgbCategoryYAxis>

            <IgbNumericXAxis
            Name="xAxis"
            @ref="xAxis"
            LabelFormat="{0}%">
            </IgbNumericXAxis>

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

            <IgbBarSeries
            Name="BarSeries1"
            @ref="barSeries1"
            XAxisName="xAxis"
            YAxisName="yAxis"
            ValueMemberPath="Percent"
            DataSource="OnlineShoppingSearches"
            ShowDefaultTooltip="true"
            IsTransitionInEnabled="true"
            IsHighlightingEnabled="true">
            </IgbBarSeries>

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

        </IgbDataChart>

    </div>
</div>

@code {
    

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

    }

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

    private OnlineShoppingSearches _onlineShoppingSearches = null;
    public OnlineShoppingSearches OnlineShoppingSearches
    {
        get
        {
            if (_onlineShoppingSearches == null)
            {
                _onlineShoppingSearches = new OnlineShoppingSearches();
            }
            return _onlineShoppingSearches;
        }
    }

}razorコピー

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

複数シリーズの Blazor 棒チャート

棒チャートは、比較のためにカテゴリごとに複数の棒を描画できます。この例では、棒チャートは人気のある映画フランチャイズの興行収益を比較しています。IgbDataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを複数の IgbBarSeries にバインドします:

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

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 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コピー

Blazor 棒チャートのスタイル設定

棒チャートのスタイルを設定でき、パーセント比較を示すために各棒に注釈値を使用できます。IgbDataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgbBarSeries にバインドし、IgbCalloutLayer を追加します。

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

using System;
using System.Collections.Generic;
public class OnlineShoppingSearchesItem
{
    public double X { get; set; }
    public double Y { get; set; }
    public string Label { get; set; }
    public double Percent { get; set; }
    public string Shop { get; set; }
}

public class OnlineShoppingSearches
    : List<OnlineShoppingSearchesItem>
{
    public OnlineShoppingSearches()
    {
        this.Add(new OnlineShoppingSearchesItem()
        {
            X = 63,
            Y = 0,
            Label = @"63%",
            Percent = 63,
            Shop = @"Amazon"
        });
        this.Add(new OnlineShoppingSearchesItem()
        {
            X = 48,
            Y = 1,
            Label = @"48%",
            Percent = 48,
            Shop = @"Search Engines"
        });
        this.Add(new OnlineShoppingSearchesItem()
        {
            X = 33,
            Y = 2,
            Label = @"33%",
            Percent = 33,
            Shop = @"Retailer Sites"
        });
        this.Add(new OnlineShoppingSearchesItem()
        {
            X = 25,
            Y = 3,
            Label = @"25%",
            Percent = 25,
            Shop = @"Marketplaces"
        });
        this.Add(new OnlineShoppingSearchesItem()
        {
            X = 21,
            Y = 4,
            Label = @"21%",
            Percent = 21,
            Shop = @"Brand Website"
        });
        this.Add(new OnlineShoppingSearchesItem()
        {
            X = 10,
            Y = 5,
            Label = @"10%",
            Percent = 10,
            Shop = @"Comparison Sites"
        });
        this.Add(new OnlineShoppingSearchesItem()
        {
            X = 8,
            Y = 6,
            Label = @"8%",
            Percent = 8,
            Shop = @"Social Media"
        });
        this.Add(new OnlineShoppingSearchesItem()
        {
            X = 2,
            Y = 7,
            Label = @"2%",
            Percent = 2,
            Shop = @"Other"
        });
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Where Online Shoppers Start Their Search
    </div>
    <div class="container vertical fill">
        <IgbDataChart
        Name="Chart"
        @ref="chart"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false">
            <IgbCategoryYAxis
            Name="yAxis"
            @ref="yAxis"
            Label="Shop"
            DataSource="OnlineShoppingSearches"
            IsInverted="true"
            Gap="0.75">
            </IgbCategoryYAxis>

            <IgbNumericXAxis
            Name="xAxis"
            @ref="xAxis"
            Interval="20"
            MaximumValue="80"
            MinimumValue="0"
            LabelFormat="{0}%">
            </IgbNumericXAxis>

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

            <IgbBarSeries
            Name="BarSeries1"
            @ref="barSeries1"
            XAxisName="xAxis"
            YAxisName="yAxis"
            ValueMemberPath="Percent"
            DataSource="OnlineShoppingSearches"
            ShowDefaultTooltip="true"
            IsTransitionInEnabled="true"
            IsHighlightingEnabled="true"
            Brush="#c938cf"
            Outline="#85068a"
            Thickness="2"
            AreaFillOpacity="0.5"
            MarkerType="MarkerType.Hidden">
            </IgbBarSeries>

            <IgbCalloutLayer
            Name="CalloutLayer1"
            @ref="calloutLayer1"
            IsAutoCalloutBehaviorEnabled="true"
            CalloutTextColor="#85068a"
            CalloutBackground="#00000000"
            CalloutLeaderBrush="#00000000"
            DataSource="OnlineShoppingSearches">
            </IgbCalloutLayer>

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

        </IgbDataChart>

    </div>
</div>

@code {
    

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

    }

    private IgbDataChart chart;
    private IgbCategoryYAxis yAxis;
    private IgbNumericXAxis xAxis;
    private IgbCategoryHighlightLayer categoryHighlightLayer;
    private IgbBarSeries barSeries1;
    private IgbCalloutLayer calloutLayer1;
    private IgbDataToolTipLayer tooltips;

    private OnlineShoppingSearches _onlineShoppingSearches = null;
    public OnlineShoppingSearches OnlineShoppingSearches
    {
        get
        {
            if (_onlineShoppingSearches == null)
            {
                _onlineShoppingSearches = new OnlineShoppingSearches();
            }
            return _onlineShoppingSearches;
        }
    }

}razorコピー

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

Blazor 積層型棒チャート

積層型棒チャート、または積層型棒グラフは、チャートの横棒にさまざまなサイズのフラグメントを表示することにより、さまざまなカテゴリのデータの構成を比較するために使用されるカテゴリ チャートの一種です。各棒または積層フラグメントの長さは、その全体的な値に比例します。

積層型棒チャートは、データを表すデータ ポイントが水平方向に隣り合って積み重ねられ、データを視覚的にグループ化するという点で、棒チャートとは異なります。各積層は正の値と負の値の両方を含みます。すべての正の値は X 軸の正の側にグループ化され、すべての負の値は X 軸の負の側にグループ化されます。

IgbDataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgbStackedBarSeries にバインドします:

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

using System;
using System.Collections.Generic;
public class EnergyRenewableConsumptionItem
{
    public string Location { get; set; }
    public double Year { get; set; }
    public double Hydro { get; set; }
    public double Solar { get; set; }
    public double Wind { get; set; }
    public double Other { get; set; }
}

public class EnergyRenewableConsumption
    : List<EnergyRenewableConsumptionItem>
{
    public EnergyRenewableConsumption()
    {
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"China",
            Year = 2019,
            Hydro = 1269.5,
            Solar = 223,
            Wind = 405.2,
            Other = 102.8
        });
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"Europe",
            Year = 2019,
            Hydro = 632.54,
            Solar = 154,
            Wind = 461.3,
            Other = 220.3
        });
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"USA",
            Year = 2019,
            Hydro = 271.16,
            Solar = 108,
            Wind = 303.4,
            Other = 78.34
        });
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"Brazil",
            Year = 2019,
            Hydro = 399.3,
            Solar = 5.5,
            Wind = 55.83,
            Other = 56.25
        });
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"Canada",
            Year = 2019,
            Hydro = 381.98,
            Solar = 4.3,
            Wind = 34.17,
            Other = 10.81
        });
    }
}csコピー

@using IgniteUI.Blazor.Controls

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

    </div>
    <div class="container vertical fill">
        <IgbDataChart
        Name="chart"
        @ref="chart"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false">
            <IgbCategoryYAxis
            Name="yAxis"
            @ref="yAxis"
            DataSource="EnergyRenewableConsumption"
            Label="Location"
            IsInverted="true"
            Gap="0.75">
            </IgbCategoryYAxis>

            <IgbNumericXAxis
            Name="xAxis"
            @ref="xAxis"
            MinimumValue="0"
            Title="TWh">
            </IgbNumericXAxis>

            <IgbStackedBarSeries
            Name="stackedBarSeries"
            @ref="stackedBarSeries"
            DataSource="EnergyRenewableConsumption"
            XAxisName="xAxis"
            YAxisName="yAxis"
            ShowDefaultTooltip="true"
            AreaFillOpacity="1">
                <IgbStackedFragmentSeries
                Name="s1"
                @ref="s1"
                ValueMemberPath="Hydro"
                Title="@("Hydro")">
                </IgbStackedFragmentSeries>

                <IgbStackedFragmentSeries
                Name="s2"
                @ref="s2"
                ValueMemberPath="Wind"
                Title="@("Wind")">
                </IgbStackedFragmentSeries>

                <IgbStackedFragmentSeries
                Name="s3"
                @ref="s3"
                ValueMemberPath="Solar"
                Title="@("Solar")">
                </IgbStackedFragmentSeries>

                <IgbStackedFragmentSeries
                Name="s4"
                @ref="s4"
                ValueMemberPath="Other"
                Title="@("Other")">
                </IgbStackedFragmentSeries>

            </IgbStackedBarSeries>

            <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 yAxis = this.yAxis;
        var xAxis = this.xAxis;
        var stackedBarSeries = this.stackedBarSeries;
        var s1 = this.s1;
        var s2 = this.s2;
        var s3 = this.s3;
        var s4 = this.s4;
        var dataToolTipLayer = this.dataToolTipLayer;

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

    }

    private IgbLegend legend;
    private IgbDataChart chart;
    private IgbCategoryYAxis yAxis;
    private IgbNumericXAxis xAxis;
    private IgbStackedBarSeries stackedBarSeries;
    private IgbStackedFragmentSeries s1;
    private IgbStackedFragmentSeries s2;
    private IgbStackedFragmentSeries s3;
    private IgbStackedFragmentSeries s4;
    private IgbDataToolTipLayer dataToolTipLayer;

    private EnergyRenewableConsumption _energyRenewableConsumption = null;
    public EnergyRenewableConsumption EnergyRenewableConsumption
    {
        get
        {
            if (_energyRenewableConsumption == null)
            {
                _energyRenewableConsumption = new EnergyRenewableConsumption();
            }
            return _energyRenewableConsumption;
        }
    }

}razorコピー

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

Blazor 積層型 100% 棒チャート

Blazor 積層型 100% 棒チャートは、X 軸 (チャートの下のラベル) の値の処理を除いて、すべての点で Blazor 積層型棒チャートと同じです。データを直接表現するのでなく、積層型棒チャートは、データ ポイント内のすべての値の合計の割合でデータを表します。

IgbDataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgbStacked100BarSeries にバインドします:

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

using System;
using System.Collections.Generic;
public class EnergyRenewableConsumptionItem
{
    public string Location { get; set; }
    public double Year { get; set; }
    public double Hydro { get; set; }
    public double Solar { get; set; }
    public double Wind { get; set; }
    public double Other { get; set; }
}

public class EnergyRenewableConsumption
    : List<EnergyRenewableConsumptionItem>
{
    public EnergyRenewableConsumption()
    {
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"China",
            Year = 2019,
            Hydro = 1269.5,
            Solar = 223,
            Wind = 405.2,
            Other = 102.8
        });
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"Europe",
            Year = 2019,
            Hydro = 632.54,
            Solar = 154,
            Wind = 461.3,
            Other = 220.3
        });
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"USA",
            Year = 2019,
            Hydro = 271.16,
            Solar = 108,
            Wind = 303.4,
            Other = 78.34
        });
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"Brazil",
            Year = 2019,
            Hydro = 399.3,
            Solar = 5.5,
            Wind = 55.83,
            Other = 56.25
        });
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"Canada",
            Year = 2019,
            Hydro = 381.98,
            Solar = 4.3,
            Wind = 34.17,
            Other = 10.81
        });
    }
}csコピー

@using IgniteUI.Blazor.Controls

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

    </div>
    <div class="container vertical fill">
        <IgbDataChart
        Name="chart"
        @ref="chart"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false">
            <IgbCategoryYAxis
            Name="yAxis"
            @ref="yAxis"
            DataSource="EnergyRenewableConsumption"
            Label="Location"
            IsInverted="true">
            </IgbCategoryYAxis>

            <IgbNumericXAxis
            Name="xAxis"
            @ref="xAxis"
            MinimumValue="0"
            Title="TWh">
            </IgbNumericXAxis>

            <IgbStacked100BarSeries
            Name="stacked100BarSeries"
            @ref="stacked100BarSeries"
            DataSource="EnergyRenewableConsumption"
            XAxisName="xAxis"
            YAxisName="yAxis"
            ShowDefaultTooltip="true"
            AreaFillOpacity="1">
                <IgbStackedFragmentSeries
                Name="s1"
                @ref="s1"
                ValueMemberPath="Hydro"
                Title="@("Hydro")">
                </IgbStackedFragmentSeries>

                <IgbStackedFragmentSeries
                Name="s2"
                @ref="s2"
                ValueMemberPath="Wind"
                Title="@("Wind")">
                </IgbStackedFragmentSeries>

                <IgbStackedFragmentSeries
                Name="s3"
                @ref="s3"
                ValueMemberPath="Solar"
                Title="@("Solar")">
                </IgbStackedFragmentSeries>

                <IgbStackedFragmentSeries
                Name="s4"
                @ref="s4"
                ValueMemberPath="Other"
                Title="@("Other")">
                </IgbStackedFragmentSeries>

            </IgbStacked100BarSeries>

            <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 yAxis = this.yAxis;
        var xAxis = this.xAxis;
        var stacked100BarSeries = this.stacked100BarSeries;
        var s1 = this.s1;
        var s2 = this.s2;
        var s3 = this.s3;
        var s4 = this.s4;
        var dataToolTipLayer = this.dataToolTipLayer;

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

    }

    private IgbLegend legend;
    private IgbDataChart chart;
    private IgbCategoryYAxis yAxis;
    private IgbNumericXAxis xAxis;
    private IgbStacked100BarSeries stacked100BarSeries;
    private IgbStackedFragmentSeries s1;
    private IgbStackedFragmentSeries s2;
    private IgbStackedFragmentSeries s3;
    private IgbStackedFragmentSeries s4;
    private IgbDataToolTipLayer dataToolTipLayer;

    private EnergyRenewableConsumption _energyRenewableConsumption = null;
    public EnergyRenewableConsumption EnergyRenewableConsumption
    {
        get
        {
            if (_energyRenewableConsumption == null)
            {
                _energyRenewableConsumption = new EnergyRenewableConsumption();
            }
            return _energyRenewableConsumption;
        }
    }

}razorコピー

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

その他のリソース

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

• エリア チャート
• 縦棒チャート
• 折れ線チャート
• スプライン チャート
• 積層型チャート

API リファレンス

以下は、上記のセクションで説明されている API メンバーのリストです。

• IgbDataChart
• DataSource
• IgbBarSeries
• IgbCalloutLayer
• IgbStackedBarSeries
• IgbStacked100BarSeries
• IgbStackedBarSeries