Blazor 차트 애니메이션

애니메이션을 사용하면 새 데이터 소스를 로드할 때 시리즈를 쉽게 만들 수 있습니다. 사용 가능한 애니메이션은 관련된 시리즈 유형에 따라 다릅니다. 예를 들어 열 계열은 x축에서 상승하여 애니메이션되고, 선 계열은 y축 원점에서 그려 애니메이션됩니다.

애니메이션은 Ignite UI for Blazor에서 비활성화되지만 IsTransitionInEnabled 속성을 true로 설정하여 활성화할 수 있습니다. 거기에서 TransitionInDuration 속성을 설정하여 애니메이션이 완료되는 데 걸리는 시간을 결정하고 TransitionInMode 설정하여 발생하는 애니메이션 유형을 결정할 수 있습니다.

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

無料で試してみる

Blazor Chart Animation Example

다음 예에서는 선형 차트 애니메이션이 기본값으로 설정된 경우 TransitionInMode- "자동." 이 예의 상단에 있는 드롭다운 및 슬라이더를 사용하면 TransitionInMode 그리고 TransitionInDuration, 각각 지원되는 다양한 애니메이션이 다양한 속도에서 어떻게 보이는지 확인할 수 있습니다.

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Infragistics.Samples
{
    public class EnergyRenewableInfo
    {
        public string Year { get; set; }
        public int Europe { get; set; }
        public int China { get; set; }
        public int USA { get; set; }
    }

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

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options horizontal">
        <span class="options-label">Transition Type </span>
        <select @bind="@SelectedTransition">
            <option>@CategoryTransitionInMode.AccordionFromBottom</option>
            <option>@CategoryTransitionInMode.AccordionFromCategoryAxisMaximum</option>
            <option>@CategoryTransitionInMode.AccordionFromCategoryAxisMinimum</option>
            <option>@CategoryTransitionInMode.AccordionFromLeft</option>
            <option>@CategoryTransitionInMode.AccordionFromRight</option>
            <option>@CategoryTransitionInMode.AccordionFromTop</option>
            <option>@CategoryTransitionInMode.AccordionFromValueAxisMaximum</option>
            <option>@CategoryTransitionInMode.AccordionFromValueAxisMinimum</option>
            <option>@CategoryTransitionInMode.Expand</option>
            <option>@CategoryTransitionInMode.FromZero</option>
            <option>@CategoryTransitionInMode.SweepFromBottom</option>
            <option>@CategoryTransitionInMode.SweepFromCategoryAxisMaximum</option>
            <option>@CategoryTransitionInMode.SweepFromCategoryAxisMinimum</option>
            <option>@CategoryTransitionInMode.SweepFromCenter</option>
            <option>@CategoryTransitionInMode.SweepFromLeft</option>
            <option>@CategoryTransitionInMode.SweepFromRight</option>
            <option>@CategoryTransitionInMode.SweepFromTop</option>
            <option>@CategoryTransitionInMode.SweepFromValueAxisMaximum</option>
            <option>@CategoryTransitionInMode.SweepFromValueAxisMinimum</option>
            <option>@CategoryTransitionInMode.Auto</option>
        </select>
        <label class="options-value" style="width: 75px">@IntervalLabel</label>
        <input class="options-slider" type="range" min="50" max="2000" step="50"
               value=@TransitionInInterval @onchange="OnTransitionIntervalChange" />
        <button @onclick="OnReloadChart">Reload Chart</button>
    </div>
    <div class="container vertical">
        @if (Data != null)
        {
            <IgbCategoryChart Height="100%" Width="100%"
                @ref="Chart"
                DataSource="Data"
                ChartType="CategoryChartType.Line"
                IsTransitionInEnabled="true"
                TransitionInMode="@SelectedTransition"
                TransitionInDuration="@TransitionInInterval"
                IsHorizontalZoomEnabled="false"
                IsVerticalZoomEnabled="false"
                YAxisTitle="TWh"
                YAxisTitleLeftMargin="10"
                YAxisTitleRightMargin="5"
                YAxisLabelLeftMargin="0"
                ComputedPlotAreaMarginMode=ComputedPlotAreaMarginMode.Series>
            </IgbCategoryChart>
        }
    </div>
</div>

@code {
    

    private int _transitionInterval = 1000; // milliseconds
    private int TransitionInInterval
    {
        get { return _transitionInterval; }
        set
        {
            _transitionInterval = value;
            StateHasChanged();
        }
    }
    private string IntervalLabel
    {
        get
        {
            return (_transitionInterval).ToString("0") + "ms";
        }
    }
    private CategoryTransitionInMode _selectedTransition;
    private CategoryTransitionInMode SelectedTransition
    {
        get { return _selectedTransition; }
        set
        {
            _selectedTransition = value;
            StateHasChanged();
        }
    }
    private IgbCategoryChart _Chart;
    private IgbCategoryChart Chart
    {
        get { return _Chart; }
        set { _Chart = value;
            StateHasChanged();
        }
    }

    private List<EnergyRenewableInfo> Data = new EnergyRenewableData();

    private void OnTransitionIntervalChange(ChangeEventArgs args)
    {
        this.TransitionInInterval = int.Parse(args.Value.ToString());
    }

    private void OnReloadChart()
    {
        this.Chart.ReplayTransitionIn();
    }
}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.

Additional Resources

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

• 차트 주석
• 차트 하이라이트
• 차트 툴팁

API References

다음은 위 섹션에서 언급된 API 멤버 목록입니다.

• IgbCategoryChart
• IsTransitionInEnabled
• TransitionInDuration
• TransitionInMode