Blazor Chart Features

Ignite UI for Blazor 사용하면 차트로 전달할 전체 데이터 스토리를 표현하는 다양한 기능을 표시할 수 있습니다. 이러한 각 기능은 완전히 사용자 정의할 수 있으며 디자인 요구 사항에 맞게 스타일을 지정할 수 있으므로 완전한 제어가 가능합니다. 강조 표시 및 주석과 같은 상호 작용을 통해 중요한 데이터 세부 정보를 호출하여 차트 내에서 보다 심층적인 데이터 분석을 수행할 수 있습니다.

Blazor 차트는 다음과 같은 차트 기능을 제공합니다.

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

無料で試してみる

Axis

다양한 축 속성을 사용하여 X축과 Y축의 모든 측면을 수정하거나 사용자 정의합니다. 격자선을 표시하고, 눈금 스타일을 사용자 정의하고, 축 제목을 변경하고, 심지어 축 위치와 교차 값을 수정할 수도 있습니다. Blazor 차트의 축 격자선, 축 레이아웃 및 축 옵션 항목의 사용자 정의에 대해 자세히 알아볼 수 있습니다.

EXAMPLE

MODULES

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

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options horizontal">
        <label>X-Axis Crossing Value:  </label>
        <label class="options-value" >@XAxisCrossingValue</label>
        <input type="range" min="-360" max="360" step="10" value="0" @oninput="OnXAxisCrossingValueChanged" />
        <label>Y-Axis Crossing Value:  </label>
        <label class="options-value" >@YAxisCrossingValue</label>
        <input type="range" min="-1.25" max="1.25" step="0.125" value="0" @oninput="OnYAxisCrossingValueChanged" />
    </div>
    <div class="container vertical">
        @if (SinData != null && CosData != null)
        {
        <IgbDataChart Height="100%" Width="100%" IsVerticalZoomEnabled="true" IsHorizontalZoomEnabled="true"
                   PlotAreaMarginTop="60" PlotAreaMarginBottom="60"
                   PlotAreaMarginLeft="30" PlotAreaMarginRight="30">
            <IgbNumericXAxis Name="xAxis" Interval="40" MinimumValue="-360" MaximumValue="360"
                          LabelLocation="AxisLabelsLocation.InsideBottom"
                          LabelTopMargin="10"
                          CrossingAxisName="yAxis"
                          CrossingValue="@YAxisCrossingValue"
                          StrokeThickness="1" Stroke="black"/>
            <IgbNumericYAxis Name="yAxis" MinimumValue="-1.25" MaximumValue="1.25" Interval="0.25"
                          LabelLocation="AxisLabelsLocation.InsideLeft"
                          LabelRightMargin="10"
                          CrossingAxisName="xAxis"
                          CrossingValue="@XAxisCrossingValue"
                          StrokeThickness="1" Stroke="black"/>

            <IgbScatterSplineSeries XAxisName="xAxis" YAxisName="yAxis" DataSource="SinData"
                                 XMemberPath="X" YMemberPath="Y" MarkerType="MarkerType.Circle" />
            <IgbScatterSplineSeries XAxisName="xAxis" YAxisName="yAxis" DataSource="CosData"
                                 XMemberPath="X" YMemberPath="Y" MarkerType="MarkerType.Circle" />
        </IgbDataChart>
        }
    </div>
</div>

@code {

    private List<Point> SinData;
    private List<Point> CosData;

    private double YAxisCrossingValue = 0;
    private double XAxisCrossingValue = 0;

    protected override void OnInitialized()
    {

        List<Point> _sinData = new List<Point>();
        List<Point> _cosData = new List<Point>();

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

            _sinData.Add(new Point() { X = i, Y = sin });
            _cosData.Add(new Point() { X = i, Y = cos });
        }

        this.SinData = _sinData;
        this.CosData = _cosData;
    }

    private void OnXAxisCrossingValueChanged(ChangeEventArgs args)
    {
        this.XAxisCrossingValue = double.Parse(args.Value.ToString());
    }

    private void OnYAxisCrossingValueChanged(ChangeEventArgs args)
    {
        this.YAxisCrossingValue = double.Parse(args.Value.ToString());
    }
}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.

Annotations

이러한 추가 레이어는 마우스/터치에 따라 달라지는 차트 상단에 있습니다. 개별적으로 또는 결합하여 사용하면 차트 내의 특정 값을 강조 표시하는 데 도움이 되는 강력한 상호 작용을 제공합니다. 차트 주석 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.

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">
            <label class="options-label">Annotations: </label>
            <label class="options-item">
                <input type="checkbox" @onchange="OnCrosshairsVisibleCheckboxChange" checked="@CrosshairsVisible" /> Crosshair
            </label>
            <label class="options-item">
                <input type="checkbox" @onchange="OnCalloutsVisibleCheckboxChange" checked="@CalloutsVisible" /> Callouts
            </label>
            <label class="options-item">
                <input type="checkbox" @onchange="OnFinalValuesCheckboxChange" checked="@FinalValuesVisible" /> Final Values
            </label>
            <label class="options-item">
                <input type="checkbox" @onchange="OnMarkersVisibleCheckBoxChange" checked="@MarkersVisible" /> Markers
            </label>
    </div>

    <div class="container vertical">
        @if (Data != null)
        {
            <IgbCategoryChart Height="100%" Width="100%"
                           @ref="Chart"
                           DataSource="Data"
                           ChartType="CategoryChartType.Line"
                           Subtitle="Renewable Electricity Generated"
                           YAxisTitle="TWh"
                           Thickness="2"
                           CrosshairsSnapToData="true"
                           CrosshairsDisplayMode="@CrosshairMode"
                           CrosshairsAnnotationEnabled="@CrosshairsVisible"
                           FinalValueAnnotationsVisible="@FinalValuesVisible"
                           YAxisLabelLocation="YAxisLabelLocation.OutsideRight"
                           CalloutsVisible="@CalloutsVisible"
                           CalloutsYMemberPath="Value"
                           CalloutsXMemberPath="Index"
                           CalloutsLabelMemberPath="Label"
                           CalloutsDataSource="CalloutData"
                           ExcludedProperties="@(new string[] { "China", "Europe" })"
                           ComputedPlotAreaMarginMode=ComputedPlotAreaMarginMode.Series>
            </IgbCategoryChart>
        }
    </div>
</div>

@code {

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

    private IgbCategoryChart _Chart;
    private IgbCategoryChart Chart
    {
        get { return _Chart; }
        set { _Chart = value;
            Chart.MarkerTypes.Add(MarkerType.Circle);
            StateHasChanged(); }
    }
    private bool MarkersVisible = true;
    private bool FinalValuesVisible = true;
    private bool CalloutsVisible = true;
    private bool CrosshairsVisible = true;

    private CrosshairsDisplayMode CrosshairMode = CrosshairsDisplayMode.Both;

    private void OnMarkersVisibleCheckBoxChange(ChangeEventArgs args)
    {
        Chart.MarkerTypes.Clear();
        bool value = args.Value != null ? (bool)args.Value : false;
        if (value == true)
        {
            Chart.MarkerTypes.Add(MarkerType.Automatic);
        }
        else {
            Chart.MarkerTypes.Add(MarkerType.None);
        }
        this.MarkersVisible = value;
    }
    private void OnFinalValuesCheckboxChange(ChangeEventArgs args)
    {
        this.FinalValuesVisible = (bool)args.Value;
    }
    private void OnCalloutsVisibleCheckboxChange(ChangeEventArgs args)
    {
        this.CalloutsVisible = (bool)args.Value;
    }
    private void OnCrosshairsVisibleCheckboxChange(ChangeEventArgs args)
    {
        bool isVisible = (bool)args.Value;
        this.CrosshairMode = isVisible ? CrosshairsDisplayMode.Both : CrosshairsDisplayMode.None;
    }
    protected override void OnInitialized()
    {

        for (int i = 0; i < this.Data.Count; i++)
        {
            CalloutData.Add(
                new CalloutInfo {
                    Index = i, Label =
                    this.Data[i].USA + " " + "TWh",
                    Value = this.Data[i].USA });
        }
    }

    public class CalloutInfo
    {
        public int Index { get; set; }
        public int Value { get; set; }
        public string Label { get; set; }
    }
}razorコピー

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

Animations

애니메이션을 활성화하여 새 데이터 소스를 로드할 때 차트에 애니메이션을 적용하세요. 다양한 유형의 애니메이션과 해당 애니메이션이 발생하는 속도를 설정하여 사용자 정의할 수 있습니다. 차트 애니메이션 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.

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

Highlighting

마우스를 데이터 항목 위로 가져가면 선, 열 또는 표식과 같은 시각적 개체를 강조 표시하여 초점을 맞춥니다. 이 기능은 모든 차트 유형에서 활성화됩니다. 차트 강조 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.

EXAMPLE

MODULES

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 IgniteUI.Blazor.Controls

<div class="container vertical sample">

    <div class="options horizontal">
        <label class="options-label" style="margin-left: 0.25rem;">Highlight Target:</label>
        <select @onchange="OnHighlightingTargetChanged" style="width: 7rem; margin-right: 1rem;">
            <option>Series</option>
            <option>Item</option>
            <option>Category</option>
            <option>None</option>
        </select>

        <label class="options-label">Mode:</label>
        <select @bind="@HighlightingMode" style="width: 7rem; margin-right: 1rem;">
            <option>@SeriesHighlightingMode.Auto</option>
            <option>@SeriesHighlightingMode.Brighten</option>
            <option>@SeriesHighlightingMode.BrightenSpecific</option>
            <option>@SeriesHighlightingMode.FadeOthers</option>
            <option>@SeriesHighlightingMode.FadeOthersSpecific</option>
            <option>@SeriesHighlightingMode.None</option>
        </select>

        <label class="options-label">Behavior:</label>
        <select @bind="@HighlightingBehavior" style="width: 7rem; margin-right: 1rem;" >
            <option>@SeriesHighlightingBehavior.Auto</option>
            <option>@SeriesHighlightingBehavior.DirectlyOver</option>
            <option>@SeriesHighlightingBehavior.NearestItems</option>
            <option>@SeriesHighlightingBehavior.NearestItemsAndSeries</option>
            <option>@SeriesHighlightingBehavior.NearestItemsRetainMainShapes</option>
        </select>

        <label class="options-label">Legend:</label>
        <select @bind="@HighlightingLegend" style="width: 7rem; margin-right: 1rem;"
                title="Chart will highlight series when you hover over legend items">
            <option>@LegendHighlightingMode.Auto</option>
            <option>@LegendHighlightingMode.MatchSeries</option>
            <option>@LegendHighlightingMode.None</option>
        </select>
    </div>

    <div class="options vertical">
        <label class="legend-title">Average Temperatures in the U.S. Cities</label>
        <div class="legend">
            <IgbLegend @ref="Legend" Orientation="LegendOrientation.Horizontal" />
        </div>
    </div>

    <div class="container vertical">
        <IgbCategoryChart Height="100%" Width="100%"
                       Legend="@Legend"
                       DataSource="Data"
                       ChartType="CategoryChartType.Column"
                       IsCategoryHighlightingEnabled="@IsCategoryHighlighting"
                       IsItemHighlightingEnabled="@IsItemHighlighting"
                       IsSeriesHighlightingEnabled="@IsSeriesHighlighting"
                       HighlightingMode="@HighlightingMode"
                       HighlightingBehavior="@HighlightingBehavior"
                       LegendHighlightingMode="@HighlightingLegend"
                       YAxisTitle="Temperatures in Celsius"
                       YAxisMinimumValue="0"
                       XAxisInterval="1">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private IgbLegend _Legend;
    private IgbLegend Legend
    {
        get { return _Legend; }
        set { _Legend = value; StateHasChanged(); }
    }

    private bool IsSeriesHighlighting = true;
    private bool IsItemHighlighting = false;
    private bool IsCategoryHighlighting = false;
    private LegendHighlightingMode HighlightingLegend = LegendHighlightingMode.Auto;
    private SeriesHighlightingMode HighlightingMode = SeriesHighlightingMode.Auto;
    private SeriesHighlightingBehavior HighlightingBehavior = SeriesHighlightingBehavior.Auto;

    private List<AverageTemperature> Data = new AverageTemperatureData();

    private void OnHighlightingTargetChanged(ChangeEventArgs args)
    {
        var highlighingTarget = (string)args.Value;
        if (highlighingTarget == "Series")
        {
            this.IsItemHighlighting = false;
            this.IsSeriesHighlighting = true;
            this.IsCategoryHighlighting = false;
        }
        else if(highlighingTarget == "Item")
        {
            this.IsItemHighlighting = true;
            this.IsSeriesHighlighting = false;
            this.IsCategoryHighlighting = false;
        }
        else if (highlighingTarget == "Category")
        {
            this.IsItemHighlighting = false;
            this.IsSeriesHighlighting = false;
            this.IsCategoryHighlighting = true;
        }
        else
        {
            this.IsItemHighlighting = false;
            this.IsSeriesHighlighting = false;
            this.IsCategoryHighlighting = false;
        }
    }

    public class AverageTemperature
    {
        public string Month { get; set; }
        public double NewYork { get; set; }
        public double LosAngeles { get; set; }
    }

    public class AverageTemperatureData : List<AverageTemperature>
    {
        public AverageTemperatureData()
        {
            this.Add(new AverageTemperature { NewYork = 10.6, LosAngeles = 28.3, Month = "JAN" });
            this.Add(new AverageTemperature { NewYork = 7.8,  LosAngeles = 31.1, Month = "FEB" });
            this.Add(new AverageTemperature { NewYork = 12.2, LosAngeles = 27.8, Month = "MAR" });
            this.Add(new AverageTemperature { NewYork = 11.7, LosAngeles = 33.9, Month = "APR" });
            this.Add(new AverageTemperature { NewYork = 19.4, LosAngeles = 35.0, Month = "MAY" });
            this.Add(new AverageTemperature { NewYork = 23.3, LosAngeles = 36.7, Month = "JUN" });
            this.Add(new AverageTemperature { NewYork = 27.2, LosAngeles = 33.3, Month = "JUL" });
            this.Add(new AverageTemperature { NewYork = 25.6, LosAngeles = 36.7, Month = "AUG" });
            this.Add(new AverageTemperature { NewYork = 22.8, LosAngeles = 43.9, Month = "SEP" });
            this.Add(new AverageTemperature { NewYork = 17.8, LosAngeles = 38.3, Month = "OCT" });
            this.Add(new AverageTemperature { NewYork = 17.8, LosAngeles = 32.8, Month = "NOV" });
            this.Add(new AverageTemperature { NewYork = 8.3,  LosAngeles = 28.9, Month = "DEC" });
        }
    }
}razorコピー

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

Markers

차트 시리즈의 마커를 사용하면 값이 주요 눈금선 사이에 있는 경우에도 데이터 요소를 빠르게 식별할 수 있습니다. 스타일, 색상 및 모양을 완벽하게 사용자 정의할 수 있습니다. 차트 표시 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.

EXAMPLE

DATA

MODULES

RAZOR

CSS

using System;
using System.Collections.Generic;
public class CountryRenewableElectricityItem
{
    public string Year { get; set; }
    public double Europe { get; set; }
    public double China { get; set; }
    public double America { get; set; }
}

public class CountryRenewableElectricity
    : List<CountryRenewableElectricityItem>
{
    public CountryRenewableElectricity()
    {
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2009",
            Europe = 34,
            China = 21,
            America = 19
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2010",
            Europe = 43,
            China = 26,
            America = 24
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2011",
            Europe = 66,
            China = 29,
            America = 28
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2012",
            Europe = 69,
            China = 32,
            America = 26
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2013",
            Europe = 58,
            China = 47,
            America = 38
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2014",
            Europe = 40,
            China = 46,
            America = 31
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2015",
            Europe = 78,
            China = 50,
            America = 19
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2016",
            Europe = 13,
            China = 90,
            America = 52
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2017",
            Europe = 78,
            China = 132,
            America = 50
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2018",
            Europe = 40,
            China = 134,
            America = 34
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2018",
            Europe = 40,
            China = 134,
            America = 34
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2019",
            Europe = 80,
            China = 96,
            America = 38
        });
    }
}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(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbCategoryChartModule),
                typeof(IgbDataChartInteractivityModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls
@using IgniteUI.Blazor.Controls
@using System
@using System.Linq

<div class="container vertical">
    <div class="options vertical">
        <IgbPropertyEditorPanel
        Name="PropertyEditor"
        @ref="propertyEditor"

        DescriptionType="CategoryChart"
        IsHorizontal="true"
        IsWrappingEnabled="true">
            <IgbPropertyEditorPropertyDescription
            PropertyPath="ChartType"
            Name="ChartTypeEditor"
            @ref="chartTypeEditor"
            Label="Chart Type"
            PrimitiveValue="@("Line")">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            PropertyPath="MarkerTypeHandler"
            Name="MarkerTypeEditor"
            @ref="markerTypeEditor"
            Label="Marker Type"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownValues="@(new string[] { "Circle", "Automatic", "Triangle", "Pyramid", "Square", "Diamond", "Pentagon", "Hexagon", "Tetragram", "Pentagram", "Hexagram", "None" })"
            DropDownNames="@(new string[] { "Circle", "Automatic", "Triangle", "Pyramid", "Square", "Diamond", "Pentagon", "Hexagon", "Tetragram", "Pentagram", "Hexagram", "None" })"
            PrimitiveValue="@("Circle")"
            Changed="EditorChangeUpdateMarkerType">
            </IgbPropertyEditorPropertyDescription>

        </IgbPropertyEditorPanel>

    </div>
    <div class="legend-title">
        Renewable Electricity Generated
    </div>
    <div class="container vertical fill">
        <IgbCategoryChart
        Name="chart"
        @ref="chart"
        IsSeriesHighlightingEnabled="true"
        ChartType="CategoryChartType.Line"
        DataSource="CountryRenewableElectricity"
        ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var propertyEditor = this.propertyEditor;
        var chartTypeEditor = this.chartTypeEditor;
        var markerTypeEditor = this.markerTypeEditor;
        var chart = this.chart;

        this.BindElements = () => {
            propertyEditor.Target = this.chart;
        };
        this.BindElements();

    }

    private IgbPropertyEditorPanel propertyEditor;
    private IgbPropertyEditorPropertyDescription chartTypeEditor;
    private IgbPropertyEditorPropertyDescription markerTypeEditor;
    private IgbCategoryChart chart;

    public void EditorChangeUpdateMarkerType(IgbPropertyEditorPropertyDescriptionChangedEventArgs args)
    {
        //var item = this.PropertyEditor.Properties.Where((p) => p.PropertyPath == "MarkerType").First();
        //var value = (string)item.PrimitiveValue;
        var chart = this.chart;

        var markerVal = (MarkerType)Enum.Parse(typeof(MarkerType), args.NewValue.ToString());
        chart.MarkerTypes.Clear();
        chart.MarkerTypes.Add(markerVal);
    }

    private CountryRenewableElectricity _countryRenewableElectricity = null;
    public CountryRenewableElectricity CountryRenewableElectricity
    {
        get
        {
            if (_countryRenewableElectricity == null)
            {
                _countryRenewableElectricity = new CountryRenewableElectricity();
            }
            return _countryRenewableElectricity;
        }
    }

}razorコピー

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

Navigation

마우스, 키보드 및 터치 상호 작용을 통해 확대/축소 및 이동하여 차트를 탐색할 수 있습니다. 차트 탐색 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.

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

using System;
using System.Collections.Generic;

namespace Infragistics.Samples
{
    public class SampleFinancialData
    {
        public static Random random = new Random();
        public static List<SampleFinancialItem> Create(int itemsCount = 365)
        {
            var data = new List<SampleFinancialItem>();

            // initial values
            var v = 10000.0;
            var o = 500.0;
            var h = Math.Round(o + (random.NextDouble() * 5));
            var l = Math.Round(o - (random.NextDouble() * 5));
            var c = Math.Round(l + (random.NextDouble() * (h - l)));

            var today = DateTime.Now;
            var end = new DateTime(today.Year, 12, 31);
            var time = end.AddDays(-itemsCount);

            for (var i = 0; i < itemsCount; i++)
            {
                var date = time.ToShortDateString();
                var label = GetShortDate(time, false);
                // adding new data item
                var item = new SampleFinancialItem();
                item.Time = time;
                item.Date = date;
                item.Label = label;
                item.Close = c;
                item.Open = o;
                item.High = h;
                item.Low = l;
                item.Volume = v;
                data.Add(item);

                // generating new values
                var mod = random.NextDouble() - 0.49;
                o = Math.Round(o + (mod * 5 * 4));
                v = Math.Round(v + (mod * 5 * 100));
                h = Math.Round(o + (random.NextDouble() * 15));
                l = Math.Round(o - (random.NextDouble() * 15));
                c = Math.Round(l + (random.NextDouble() * (h - l)));
                time = time.AddDays(1);
            }
            return data;
        }

        public static string GetShortDate(DateTime dt, bool showYear)
        {
            var months = new List<string> {
                "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
            };
            var ind = dt.Month - 1;
            var day = dt.Day;
            var label = months[ind] + " " + day;
            if (showYear)
            {
                label += " " + dt.Year;
            }
            return label;
        }
    }

    public class SampleFinancialItem
    {
        public double High { get; set; }
        public double Low { get; set; }
        public double Open { get; set; }
        public double Close { get; set; }
        public double Volume { get; set; }

        public string Label { get; set; }
        public string Date { get; set; }
        public DateTime Time { get; set; }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options horizontal">
        <div class="options vertical" style="width: 100px">
            <button @onclick="OnPanUp">Pan Up</button>
            <button @onclick="OnPanDown">Pan Down</button>
        </div>
        <div class="options vertical" style="width: 100px">
            <button @onclick="OnPanLeft">Pan Left</button>
            <button @onclick="OnPanRight">Pan Right</button>
        </div>
        <div class="options vertical" style="width: 100px">
            <button @onclick="OnZoomIn">Zoom In</button>
            <button @onclick="OnZoomOut">Zoom Out</button>
        </div>
        <div class="options vertical" style="width: 120px; align-self: center">
            <label class="options-label" style="margin: 5px">Pan Modifier:</label>
            <label class="options-label" style="margin: 5px">Zoom Modifier:</label>
        </div>
        <div class="options vertical" style="width: 100px">
            <select @bind="@PanModifier" style="margin: 5px">
                <option>@ModifierKeys.Alt</option>
                <option>@ModifierKeys.Control</option>
                <option>@ModifierKeys.Shift</option>
                <option>@ModifierKeys.Windows</option>
                <option>@ModifierKeys.Apple</option>
                <option>@ModifierKeys.None</option>
            </select>
            <select @bind="@DragModifier" style="margin: 5px">
                <option>@ModifierKeys.Alt</option>
                <option>@ModifierKeys.Control</option>
                <option>@ModifierKeys.Shift</option>
                <option>@ModifierKeys.Windows</option>
                <option>@ModifierKeys.Apple</option>
                <option>@ModifierKeys.None</option>
            </select>
        </div>
        <div class="options vertical" style="width: 150px; align-self: center">
            <label class="options-label" style="margin: 5px;">Interaction:</label>
            <label class="options-label" style="margin: 5px;">Zooming:</label>
        </div>
        <div class="options vertical" style="width: 100px">
            <select @bind="@DefaultInteraction" style="margin: 5px">
                <option>@InteractionState.DragZoom</option>
                <option>@InteractionState.DragPan</option>
                <option>@InteractionState.None</option>
            </select>
            <input class="options-item" type="checkbox" @onchange="OnEnableZoomingChange" checked="@IsZoomingEnabled" />
        </div>
    </div>

    <div class="container vertical">

        <IgbDataChart @ref="Chart" Height="100%" Width="100%"
                   Subtitle="Stock Prices Series in Candlestick Display Type"
                   SubtitleTopMargin="10"
                   IsHorizontalZoomEnabled="@IsZoomingEnabled"
                   IsVerticalZoomEnabled="@IsZoomingEnabled"
                   PanModifier="@PanModifier"
                   DragModifier="@DragModifier"
                   DefaultInteraction="@DefaultInteraction">

            <IgbCategoryXAxis Name="xAxis" Label="Label" DataSource="Data" />
            <IgbNumericYAxis Name="yAxis" Title="Amount (in USD)" TitleRightMargin="10"
                    LabelRightMargin="10"
                    LabelHorizontalAlignment="HorizontalAlignment.Left"
                    LabelLocation="AxisLabelsLocation.OutsideRight" />

            <IgbFinancialPriceSeries XAxisName="xAxis"
                    YAxisName="yAxis"
                    DataSource="Data"
                    DisplayType="PriceDisplayType.Candlestick"
                    OpenMemberPath="Open"
                    CloseMemberPath="Close"
                    HighMemberPath="High"
                    LowMemberPath="Low"
                    VolumeMemberPath="Volume"
                    ShowDefaultTooltip="true"
                    IsTransitionInEnabled="true"
                    Title="Price" />
        </IgbDataChart>

    </div>
</div>

@code {
    private List<SampleFinancialItem> Data;
    private bool IsZoomingEnabled = true;
    private ModifierKeys PanModifier = ModifierKeys.Alt;
    private ModifierKeys DragModifier = ModifierKeys.Shift;
    private InteractionState DefaultInteraction = InteractionState.DragPan;

    private IgbDataChart _chart;
    public IgbDataChart Chart
    {
        get { return _chart; }
        set {
            _chart = value;
            this.Chart.ActualWindowScaleHorizontal = 0.60;
            this.Chart.ActualWindowScaleVertical = 0.60;
            this.Chart.ActualWindowPositionVertical = 0.20;
            this.Chart.ActualWindowPositionHorizontal = 0.20;
            StateHasChanged();
        }
    }

    protected override void OnInitialized()
    {

        Data = SampleFinancialData.Create();
    }

    private void OnPanUp()
    {
        this.Chart.ActualWindowPositionVertical -= 0.05;
    }

    private void OnPanDown()
    {
        this.Chart.ActualWindowPositionVertical += 0.05;
    }

    private void OnPanLeft()
    {
        this.Chart.ActualWindowPositionHorizontal -= 0.05;
    }

    private void OnPanRight()
    {
        this.Chart.ActualWindowPositionHorizontal += 0.05;
    }

    private void OnZoomIn()
    {
        if (this.Chart.ActualWindowPositionHorizontal < 1.0)
            this.Chart.ActualWindowPositionHorizontal += 0.025;

        if (this.Chart.ActualWindowPositionVertical < 1.0)
            this.Chart.ActualWindowPositionVertical += 0.025;

        if (this.Chart.ActualWindowScaleHorizontal > 0.05)
            this.Chart.ActualWindowScaleHorizontal -= 0.05;

        if (this.Chart.ActualWindowScaleVertical > 0.05)
            this.Chart.ActualWindowScaleVertical -= 0.05;

    }

    private void OnZoomOut()
    {
        if (this.Chart.ActualWindowPositionHorizontal > 0.025)
            this.Chart.ActualWindowPositionHorizontal -= 0.025;

        if (this.Chart.ActualWindowPositionVertical > 0.025)
            this.Chart.ActualWindowPositionVertical -= 0.025;

        if (this.Chart.ActualWindowScaleHorizontal < 1.0)
            this.Chart.ActualWindowScaleHorizontal += 0.05;

        if (this.Chart.ActualWindowScaleVertical < 1.0)
            this.Chart.ActualWindowScaleVertical += 0.05;

    }

    private void OnEnableZoomingChange(ChangeEventArgs args)
    {
        this.IsZoomingEnabled = (bool)args.Value;
    }
}razorコピー

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

Overlays

오버레이를 사용하면 차트에 가로 또는 세로 선을 그려 중요한 값과 임계값에 주석을 달 수 있습니다. 차트 오버레이 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.

EXAMPLE

MODULES

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

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        @if (Data != null)
        {
        <IgbDataChart Height="100%" Width="100%" IsHorizontalZoomEnabled="true" IsVerticalZoomEnabled="true">
            <IgbCategoryXAxis Name="xAxis" DataSource="Data" Label="Label" />
            <IgbNumericYAxis Name="yAxis" MinimumValue="0" MaximumValue="10" />

            <IgbColumnSeries XAxisName="xAxis" YAxisName="yAxis" DataSource="Data" ValueMemberPath="Value" />

            <IgbValueOverlay AxisName="yAxis" Value="2.0" Thickness="5" />
            <IgbValueOverlay AxisName="yAxis" Value="3.6" Thickness="5" />
            <IgbValueOverlay AxisName="yAxis" Value="5.8" Thickness="5" />
            <IgbValueOverlay AxisName="yAxis" Value="1.0" Thickness="5" />
            <IgbValueOverlay AxisName="yAxis" Value="8.0" Thickness="5" />
            <IgbValueOverlay AxisName="yAxis" Value="7.0" Thickness="5" />
            <IgbValueOverlay AxisName="yAxis" Value="5.0" Thickness="5" />

        </IgbDataChart>

        }
    </div>
</div>

@code {

    private List<OverlayDataItem> Data;

    protected override void OnInitialized()
    {

        var data = new List<OverlayDataItem>() {
            new OverlayDataItem() { Label = "1", Value = 1.0 },
            new OverlayDataItem() { Label = "2", Value = 2.0 },
            new OverlayDataItem() { Label = "3", Value = 6.0 },
            new OverlayDataItem() { Label = "4", Value = 8.0 },
            new OverlayDataItem() { Label = "5", Value = 2.0 },
            new OverlayDataItem() { Label = "6", Value = 6.0 },
            new OverlayDataItem() { Label = "7", Value = 4.0 },
            new OverlayDataItem() { Label = "8", Value = 2.0 },
            new OverlayDataItem() { Label = "9", Value = 1.0 }
        };

        this.Data = data;
    }

    public class OverlayDataItem {
        public string Label { get; set; }
        public double Value { get; set; }
    }

}razorコピー

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

Performance

Blazor 차트는 수백만 개의 데이터 포인트를 렌더링하고 몇 밀리초마다 업데이트하는 고성능을 위해 최적화되었습니다. 그러나 차트 성능에 영향을 미치는 여러 차트 기능이 있으며 애플리케이션에서 성능을 최적화할 때 고려해야 합니다. 이 기능에 대한 자세한 내용은 차트 성능 항목에서 확인할 수 있습니다.

EXAMPLE

MODULES

RAZOR

JS

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 IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options horizontal">
        <label class="options-label">Data Points: </label>
        <label class="options-value">@DataInfo</label>
        <input class="options-slider" type="range" min="10000" max="1000000" step="10000"
               value="@DataPoints" @onchange="OnDataPointsChanged" />
        <button @onclick="OnDataGenerateClick">Generate Data</button>
    </div>
    <div class="container vertical">
        <IgbCategoryChart @ref="chart"
            Height="100%" Width="100%"
            DataSourceScript="getHighVolumeData"
            YAxisLabelLocation="YAxisLabelLocation.OutsideRight"
            YAxisTitle="Value of Data Points"
            XAxisTitle="Index of Data Points"
            ToolTipType="ToolTipType.Default"
            XAxisEnhancedIntervalPreferMoreCategoryLabels="false"
            ShouldAutoExpandMarginForInitialLabels="false"
            CrosshairsDisplayMode="CrosshairsDisplayMode.None"
            SeriesAdded="OnSeriesAdded">
        </IgbCategoryChart>
    </div>
</div>

@code {
    private IgbCategoryChart chart;
    private int DataPoints = 1000000;
    private string DataInfo;

    protected override void OnInitialized()
    {

        this.DataInfo = ToShortString(this.DataPoints);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await IgniteUIBlazor.JsRuntime.InvokeVoidAsync("setHighVolumeDataCount", this.DataPoints);
        }
    }

    private void OnSeriesAdded(IgbChartSeriesEventArgs e)
    {
        ((IgbCategoryChart)e.Parent).MarkerTypes.Clear();
        ((IgbCategoryChart)e.Parent).MarkerTypes.Add(MarkerType.None);
    }

    private void OnDataPointsChanged(ChangeEventArgs args)
    {
        this.DataPoints = int.Parse(args.Value.ToString());
        this.DataInfo = ToShortString(this.DataPoints);
    }

    private void OnDataGenerateClick()
    {
        Task.Delay(1).ContinueWith((t) => GenerateData());
    }

    private async Task GenerateData()
    {
        await IgniteUIBlazor.JsRuntime.InvokeVoidAsync("setHighVolumeDataCount", this.DataPoints);
    }

    public static string ToShortString(double largeValue)
    {
        double roundValue;

        if (largeValue >= 1000000)
        {
            roundValue = Math.Round(largeValue / 100000) / 10;
            return roundValue + "m";
        }
        if (largeValue >= 1000)
        {
            roundValue = Math.Round(largeValue / 100) / 10;
            return roundValue + "k";
        }

        roundValue = Math.Round(largeValue);
        return roundValue + "";
    }
}razorコピー

var __highVolumeDataCount = 1000000;
var __highVolumeData = [];
function setHighVolumeDataCount(dataCount) {
    __highVolumeDataCount = dataCount;
    __highVoluenData = generateHighVolumeData();
    var chart = document.querySelectorAll("igc-category-chart");
    if (chart && chart.length > 0) {
        for (var  i = 0; i < chart.length; i++) {
            if (chart[i].dataSource === __highVolumeData) {
                chart[i].notifyClearItems(__highVolumeData);
            }
        }       
    }
}

function generateHighVolumeData() {
    var dataCount = __highVolumeDataCount;
    var curr = 100.0;
    var data = __highVolumeData;
    var index = "";
    __highVolumeData.length = dataCount;
    for (var i = 0; i <= dataCount; i++) {
        curr += Math.random() * 4.0 - 2.0;
        index = toStringWithCommas(i); 
        data[i] = { Label: index, Value: curr };
    }
    return data;
}

function toStringWithCommas(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function getHighVolumeData() {
    return __highVolumeData;
}

igRegisterScript("getHighVolumeData", getHighVolumeData, true);
jsコピー

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

Tooltips

도구 설명을 통해 특정 시리즈 유형과 관련된 모든 정보를 표시합니다. 항목 수준 및 범주 수준 도구 설명과 같이 활성화할 수 있는 다양한 도구 설명이 있습니다. 차트 도구 설명 항목에서 이 기능에 대해 자세히 알아볼 수 있습니다.

EXAMPLE

DATA

MODULES

RAZOR

CSS

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

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options vertical">
        <IgbPropertyEditorPanel
        Name="PropertyEditor"
        @ref="propertyEditor"

        DescriptionType="CategoryChart"
        IsHorizontal="true"
        IsWrappingEnabled="true">
            <IgbPropertyEditorPropertyDescription
            PropertyPath="ToolTipType"
            Name="ToolTipTypeEditor"
            @ref="toolTipTypeEditor"
            Label="ToolTip Type: "
            PrimitiveValue="@("Data")">
            </IgbPropertyEditorPropertyDescription>

        </IgbPropertyEditorPanel>

    </div>
    <div class="legend-title">
        Highest Grossing Movie Franchises
    </div>
    <div class="legend">
        <IgbLegend
        Name="legend"
        @ref="legend">
        </IgbLegend>

    </div>
    <div class="container vertical fill">
        <IgbCategoryChart
        Name="chart"
        @ref="chart"
        ChartType="CategoryChartType.Column"
        DataSource="HighestGrossingMovies"
        XAxisInterval="1"
        YAxisTitle="Billions of U.S. Dollars"
        YAxisTitleLeftMargin="10"
        YAxisTitleRightMargin="5"
        YAxisLabelLeftMargin="0"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        CrosshairsSnapToData="true">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var propertyEditor = this.propertyEditor;
        var toolTipTypeEditor = this.toolTipTypeEditor;
        var legend = this.legend;
        var chart = this.chart;

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

    }

    private IgbPropertyEditorPanel propertyEditor;
    private IgbPropertyEditorPropertyDescription toolTipTypeEditor;
    private IgbLegend legend;
    private IgbCategoryChart chart;

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

Trendlines

추세선을 사용하여 추세를 식별하거나 데이터에서 패턴을 찾습니다. Blazor 차트는 CubicFit 및 LinearFit과 같이 다양한 추세선을 지원합니다. 이 기능에 대한 자세한 내용은 차트 추세선 항목에서 확인할 수 있습니다.

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Net.Http;
using System.Net.Http.Json;
using System.Text.Json;
using System.Text.Json.Serialization;
using System.Globalization;

namespace Infragistics.Samples
{
    public class StocksHistory
    {
        public static async Task<List<StockPrice[]>> GetMultipleStocks()
        {
            // getting prices of multiples stocks asynchronously
            var dataSources = new List<StockPrice[]> {
                //await GetAmazonStock(),
                await GetGoogleStock(),
                await GetMicrosoftStock(),
                //await GetTeslaStock()
            };

            return dataSources;
        }

        /** gets Amazon stock OHLC prices from a .JSON file */
        public static async Task<StockPrice[]> GetAmazonStock()
        {
            var url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";

            //TODO
            // setting data intent for Series Title, e.g. FinancialChart usage
            //(stockData as any).__dataIntents = {
            //  close: ["SeriesTitle/Amazon"]
            //};
            // console.log("fetchAmazonStock: ", stockData.length);

            //var serializeOptions = new JsonSerializerOptions();
            //serializeOptions.Converters.Add(new DateTimeConverter());

            var http = new HttpClient();
            var data = await http.GetFromJsonAsync<StockPrice[]>(url);
            foreach (var item in data)
            {
                var dateArray = item.Date.Split("-");
                var d = int.Parse(dateArray[2]);
                var m = int.Parse(dateArray[1]) + 1;
                var y = int.Parse(dateArray[0]);

                item.Time = new DateTime(y, m, d);
            }

            return data;

        }

        /** gets Tesla stock OHLC prices from a .JSON file */
        public static async Task<StockPrice[]> GetTeslaStock()
        {
            var url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";

            //TODO
            // setting data intent for Series Title, e.g. FinancialChart usage
            //(stockData as any).__dataIntents = {
            //  close: ["SeriesTitle/Amazon"]
            //};
            // console.log("fetchAmazonStock: ", stockData.length);

            var serializeOptions = new JsonSerializerOptions();
            serializeOptions.Converters.Add(new DateTimeConverter());

            var http = new HttpClient();
            var data = await http.GetFromJsonAsync<StockPrice[]>(url);
            foreach (var item in data)
            {
                var dateArray = item.Date.Split("-");
                var d = int.Parse(dateArray[2]);
                var m = int.Parse(dateArray[1]) + 1;
                var y = int.Parse(dateArray[0]);

                item.Time = new DateTime(y, m, d);
            }
            return data;

        }

        /** gets Microsoft stock OHLC prices from a .JSON file */
        public static async Task<StockPrice[]> GetMicrosoftStock()
        {
            var url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";

            //TODO
            // setting data intent for Series Title, e.g. FinancialChart usage
            //(stockData as any).__dataIntents = {
            //  close: ["SeriesTitle/Amazon"]
            //};
            // console.log("fetchAmazonStock: ", stockData.length);
            var serializeOptions = new JsonSerializerOptions();
            serializeOptions.Converters.Add(new DateTimeConverter());

            var http = new HttpClient();
            var data = await http.GetFromJsonAsync<StockPrice[]>(url);
            foreach (var item in data)
            {
                var dateArray = item.Date.Split("-");
                var d = int.Parse(dateArray[2]);
                var m = int.Parse(dateArray[1]) + 1;
                var y = int.Parse(dateArray[0]);

                item.Time = new DateTime(y, m, d);
            }
            return data;

        }

        public static async Task<StockPrice[]> GetGoogleStock()
        {
            var url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";

            //TODO
            // setting data intent for Series Title, e.g. FinancialChart usage
            //(stockData as any).__dataIntents = {
            //  close: ["SeriesTitle/Amazon"]
            //};
            // console.log("fetchAmazonStock: ", stockData.length);

            var serializeOptions = new JsonSerializerOptions();
            serializeOptions.Converters.Add(new DateTimeConverter());

            var http = new HttpClient();
            var data = await http.GetFromJsonAsync<StockPrice[]>(url);
            foreach (var item in data)
            {
                var dateArray = item.Date.Split("-");
                var d = int.Parse(dateArray[2]);
                var m = int.Parse(dateArray[1]) + 1;
                var y = int.Parse(dateArray[0]);

                item.Time = new DateTime(y, m, d);
            }

            return data;
        }
    }

    public class DateTimeConverter : JsonConverter<DateTime>
    {
        public override DateTime Read(
            ref Utf8JsonReader reader,
            Type typeToConvert,
            JsonSerializerOptions options)
        {
            return DateTime.Now;
        }

        public override void Write(
           Utf8JsonWriter writer,
           DateTime date,
           JsonSerializerOptions options) =>
               writer.WriteStringValue(date.ToString());
    }

    public class StockPrice
    {
        public string Date { get; set; }
        public DateTime Time { get; set; }
        public double Open { get; set; }
        public double High { get; set; }
        public double Low { get; set; }
        public double Close { get; set; }
        public double Volume { get; set; }
        public int Index { get; set; }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options horizontal">
        <label class="options-label">Trendlines: </label>
        <label class="options-item">
            <select @bind="@TrendLineType">
                <option>@TrendLineType.CubicFit</option>
                <option>@TrendLineType.LinearFit</option>
                <option>@TrendLineType.QuinticFit</option>
                <option>@TrendLineType.QuarticFit</option>
                <option>@TrendLineType.ExponentialFit</option>
                <option>@TrendLineType.PowerLawFit</option>
                <option>@TrendLineType.LogarithmicFit</option>
                <option>@TrendLineType.CumulativeAverage</option>
                <option>@TrendLineType.ExponentialAverage</option>
                <option>@TrendLineType.SimpleAverage</option>
                <option>@TrendLineType.ModifiedAverage</option>
                <option>@TrendLineType.WeightedAverage</option>
                <option>@TrendLineType.None</option>
            </select>
        </label>

    </div>

    <div class="container vertical">

        @if (Data != null)
        {
            <IgbFinancialChart Width="100%"
                Height="100%"
                ChartType=FinancialChartType.Bar
                Thickness=2
                DataSource="Data"
                TrendLineType="@TrendLineType"
                TrendLineThickness=2
                TrendLinePeriod=10
                TrendLineBrushes="rgba(0, 101, 209, 1)"
                ChartTitle="Microsoft Trend"
                Subtitle="Between 2013 and 2017"
                ZoomSliderType="FinancialChartZoomSliderType.None"
                IsHorizontalZoomEnabled="false"
                IsVerticalZoomEnabled="false"/>
        }
    </div>
</div>

@code {
    

    protected StockPrice[] Data;
    protected TrendLineType TrendLineType = TrendLineType.QuinticFit;

    protected override async Task OnInitializedAsync()
    {
        this.Data = await StocksHistory.GetMicrosoftStock();
    }
}razorコピー

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

API References

• IgbCategoryChart
• IgbDataChart
• IgbFinancialChart