Blazor チャート機能

Ignite UI for Blazor チャートを使用すると、さまざまな機能を表示して、チャートで伝えられる完全なデータストーリーを表現できます。これらの各機能は完全にカスタマイズ可能であり、デザインのニーズにに合わせてスタイルを設定できるため、完全に制御できます。ハイライト表示や注釈などの操作により、重要なデータの詳細を呼び出すことができ、チャート内のより深いデータ分析が可能になります。

Blazor チャートは、次のチャート機能を提供します。

軸

異なる軸プロパティを使用して、X 軸と Y 軸の両方のすべての側面を変更またはカスタマイズします。グリッド線を表示したり、目盛りのスタイルをカスタマイズしたり、軸のタイトルを変更したり、軸の位置や交差値を変更したりすることもできます。Blazor チャートのカスタマイズについての詳細には、軸グリッド線、軸レイアウト、および軸オプションのトピックをご覧ください。

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

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

注釈

これらの追加のレイヤーは、マウス/タッチに依存するほかのチャートレイヤーの上にあります。個別にまたは組み合わせて使用すると、チャート内の特定の値を強調するのに役立つ強力な操作を提供します。この機能の詳細については、チャート注釈トピックを参照してください。

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

アニメーション

アニメーションを有効にして、新しいデータソースを読み込むときにチャートをアニメーション化します。これらは、さまざまなタイプのアニメーションとそれらのアニメーションが実行される速度を設定することでカスタマイズできます。この機能の詳細については、チャートアニメーショントピックを参照してください。

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

ハイライト表示

線、列、マーカーなどのビジュアルに、マウスをデータ項目の上に置いたときにハイライト表示して、フォーカスを合わせます。この機能は、すべてのチャートタイプで有効になっています。この機能の詳細については、チャートのハイライト表示トピックを参照してください。

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

マーカー

チャートシリーズのマーカーを使用して値が主要なグリッド線の間にある場合でも、データポイントをすばやく識別します。これらは、スタイル、カラー、および形状で完全にカスタマイズ可能です。この機能の詳細については、チャートマーカートピックを参照してください。

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

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

オーバーレイ

オーバーレイを使用すると、チャートに水平線または垂直線をプロットして、重要な値としきい値に注釈を付けることができます。この機能の詳細については、チャートオーバーレイトピックを参照してください。

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

パフォーマンス

Blazor チャートは、数百万のデータポイントを描画し、それらを数ミリ秒ごとに更新する高性能のために最適化されています。ただし、チャートのパフォーマンスに影響を与えるいくつかのチャート機能があり、アプリケーションのパフォーマンスを最適化するときにそれらを考慮する必要があります。この機能の詳細については、チャートパフォーマンストピックを参照してください。

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

ツールチップ

ツールチップを使用して、特定のシリーズタイプに関連するすべての情報を表示します。項目レベルやカテゴリレベルのツールチップなど、有効にできるさまざまなツールチップがあります。この機能の詳細については、チャートツールチップトピックを参照してください。

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

トレンドライン

トレンドラインを使用して、トレンドを特定したり、データ内のパターンを見つけたりします。Blazor チャートでは、CubicFit や LinearFit など、さまざまなトレンドラインがサポートされています。この機能の詳細については、チャートトレンドライントピックを参照してください。

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