Blazor 바 차트

Ignite UI for Blazor 바 차트, 막대 그래프 또는 수평 바 차트 가로 막대로 인코딩된 데이터와 높이가 같지만 길이가 다른 다양한 범주의 데이터 빈도, 개수, 총계 또는 평균을 빠르게 비교하는 데 사용되는 가장 일반적인 범주형 차트 유형 중 하나입니다. 이 차트는 시간 경과에 따른 항목 값의 변화를 보여주는 데 이상적입니다. 데이터는 차트의 왼쪽에서 오른쪽으로 데이터 포인트 값을 향해 확장되는 사각형 모음을 사용하여 표현됩니다. 바 차트 기둥 차트와 매우 유사하지만 바 차트 시계 방향으로 90도 회전하여 렌더링되므로 가로 방향(왼쪽에서 오른쪽)인 반면 기둥 차트 세로 방향(위에서 아래)입니다.

Blazor Bar Chart Example

아래 예와 같이 데이터 소스를 여러 IgbBarSeries에 바인딩하여 IgbDataChart 컨트롤에서 Blazor 바 차트 만들 수 있습니다.

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

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

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

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


@using IgniteUI.Blazor.Controls

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

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

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

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

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

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

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

        </IgbDataChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

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

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

    }

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

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

}razor

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

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Bar Chart Recommendations

Are Blazor Bar Charts right for your project?

Blazor 바 차트 데이터 또는 데이터로 올바른 스토리를 전달하는 방법에 따라 여러 변형이 포함됩니다. 여기에는 다음이 포함됩니다.

그룹화된 바 차트
누적 바 차트
극 막대 바 차트
누적 100 바 차트

Bar Chart Use Cases

바 차트 선택하는 데는 몇 가지 일반적인 사용 사례가 있습니다.

시간에 따른 추세나 데이터 범주의 숫자 값 변화를 표시해야 합니다.
1개 이상의 데이터 계열의 데이터 값을 비교해야 합니다.
부분 대 전체 비교를 표시하려고 합니다.
카테고리의 상위 또는 하위 비율을 표시하려고 합니다.
하위 카테고리(누적 막대)로 그룹화된 여러 데이터 포인트를 분석합니다.

이러한 사용 사례는 일반적으로 다음 시나리오에 사용됩니다.

영업관리.
재고 관리.
주식 차트.
숫자 값 또는 시계열 값을 비교하는 문자열 값입니다.

Bar Chart Best Practices:

숫자 축을 0에서 시작합니다.
막대에는 단일 색상을 사용하십시오.
각 막대를 분리하는 공간이 막대 자체 너비의 1/2인지 확인하십시오.
순위 지정 또는 비교 순서가 지정된 범주(항목)가 오름차순 또는 내림차순으로 정렬되어 있는지 확인하세요.
가독성을 위해 범주 값을 Y축(차트의 왼쪽 레이블)에 오른쪽 정렬합니다.

When Not to Use Bar Chart

데이터가 너무 많아서 Y축이 공간에 맞지 않거나 읽을 수 없습니다.
자세한 시계열 분석이 필요합니다. 이러한 유형의 데이터에 대해 시계열이 포함된 선형 차트 고려하세요.

Bar Chart Data Structure:

데이터 소스는 데이터 항목의 배열 또는 목록이어야 합니다.
데이터 소스에는 데이터 항목이 하나 이상 포함되어 있어야 합니다.
목록에는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어야 합니다.
목록에는 숫자 데이터 열이 하나 이상 포함되어야 합니다.

Blazor Bar Chart with Single Series

바 차트 카테고리 시리즈 그룹에 속하며 차트의 왼쪽에서 오른쪽으로 데이터 포인트 값을 향해 확장되는 직사각형 모음을 사용하여 렌더링됩니다. 아래 예제와 같이 데이터를 IgbBarSeries에 바인딩하여 IgbDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

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 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 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 Bar Chart with Multiple Series

바 차트 비교 목적으로 범주별로 여러 막대를 렌더링할 수 있습니다. 이 예에서 바 차트 인기 영화 프랜차이즈 간의 박스오피스 수익을 비교합니다. 아래 예제와 같이 데이터를 여러 IgbBarSeries에 바인딩하여 IgbDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

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

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

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

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


@using IgniteUI.Blazor.Controls

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

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

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

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

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

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

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

        </IgbDataChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

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

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

    }

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

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

}razor

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

Blazor Bar Chart Styling

바 차트 스타일을 지정할 수 있으며, 예를 들어 백분율 비교를 보여주기 위해 각 막대에 주석 값을 사용하는 기능을 허용합니다. 아래 예와 같이 데이터를 IgbBarSeries에 바인딩하고 IgbCalloutLayer를 추가하여 IgbDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

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 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 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 Stacked Bar Chart

누적 바 차트 또는 누적 막대 그래프는 차트의 가로 막대에 다양한 크기의 조각을 표시하여 다양한 데이터 범주의 구성을 비교하는 데 사용되는 범주 차트 유형입니다. 각 막대의 길이 또는 조각 더미는 전체 값에 비례합니다.

누적 바 차트 데이터를 나타내는 데이터 요소가 수평으로 나란히 쌓여 데이터를 시각적으로 그룹화한다는 점에서 바 차트와 다릅니다. 각 스택에는 양수 값과 음수 값이 모두 포함될 수 있습니다. 모든 양수 값은 X축의 양수 쪽에 그룹화되고, 모든 음수 값은 X축의 음수 쪽에 그룹화됩니다.

아래 예제와 같이 데이터를 IgbStackedBarSeries에 바인딩하여 IgbDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

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 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 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 Stacked 100% Bar Chart

Blazor Stacked 100% 바 차트 X축(차트의 하단 레이블)의 값을 처리하는 것을 제외하고는 모든 면에서 Blazor Stacked 바 차트와 동일합니다. Stacked 100 bar chart는 데이터를 직접 표현하는 대신 데이터 포인트의 모든 값 합계에 대한 백분율로 데이터를 표현합니다.

아래 예와 같이 데이터를 IgbStacked100BarSeries에 바인딩하여 IgbDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

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 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 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

Additional Resources

다음 항목에서 관련 차트 유형에 대한 자세한 내용을 확인할 수 있습니다.

API References

다음 표에는 위 섹션에서 언급된 API 멤버가 나열되어 있습니다.