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

無料で試してみる

Blazor Chart Highlighting Example

다음 예제는 Blazor 차트에서 사용할 수 있는 다양한 강조 표시 옵션을 보여줍니다.

EXAMPLE

MODULES

DATA

RAZOR

CSS

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

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

using System;
using System.Collections.Generic;
public class TemperatureAnnotatedDataItem
{
    public double Index { get; set; }
    public string TempInfo { get; set; }
    public double Temperature { get; set; }
    public string Month { get; set; }
}

public class TemperatureAnnotatedData
    : List<TemperatureAnnotatedDataItem>
{
    public TemperatureAnnotatedData()
    {
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 0,
            TempInfo = @"27°C",
            Temperature = 27,
            Month = @"Jan"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 1,
            TempInfo = @"25°C",
            Temperature = 25,
            Month = @"Feb"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 2,
            TempInfo = @"21°C",
            Temperature = 21,
            Month = @"Mar"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 3,
            TempInfo = @"19°C",
            Temperature = 19,
            Month = @"Apr"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 4,
            TempInfo = @"16°C",
            Temperature = 16,
            Month = @"May"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 5,
            TempInfo = @"13°C",
            Temperature = 13,
            Month = @"Jun"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 6,
            TempInfo = @"14°C",
            Temperature = 14,
            Month = @"Jul"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 7,
            TempInfo = @"15°C",
            Temperature = 15,
            Month = @"Aug"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 8,
            TempInfo = @"19°C",
            Temperature = 19,
            Month = @"Sep"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 9,
            TempInfo = @"22°C",
            Temperature = 22,
            Month = @"Oct"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 10,
            TempInfo = @"26°C",
            Temperature = 26,
            Month = @"Nov"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 11,
            TempInfo = @"30°C",
            Temperature = 30,
            Month = @"Dec"
        });
    }
}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="HighlightingMode"
            Name="HighlightingModeEditor"
            @ref="highlightingModeEditor"
            Label="Highlighting Mode: "
            PrimitiveValue="@("FadeOthersSpecific")">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            PropertyPath="HighlightingBehavior"
            Name="HighlightingBehaviorEditor"
            @ref="highlightingBehaviorEditor"
            Label="Highlighting Behavior: "
            PrimitiveValue="@("NearestItemsAndSeries")">
            </IgbPropertyEditorPropertyDescription>

        </IgbPropertyEditorPanel>

    </div>
    <div class="legend-title">
        Average Temperature in Sydney
    </div>
    <div class="container vertical fill">
        <IgbCategoryChart
        Name="chart"
        @ref="chart"
        ChartType="CategoryChartType.Column"
        ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        DataSource="TemperatureAnnotatedData"
        HighlightingMode="SeriesHighlightingMode.FadeOthersSpecific"
        HighlightingBehavior="SeriesHighlightingBehavior.NearestItemsAndSeries"
        YAxisMaximumValue="35"
        YAxisLabelLocation="YAxisLabelLocation.OutsideRight"
        ToolTipType="ToolTipType.None"
        IsTransitionInEnabled="false">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

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

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

    }

    private IgbPropertyEditorPanel propertyEditor;
    private IgbPropertyEditorPropertyDescription highlightingModeEditor;
    private IgbPropertyEditorPropertyDescription highlightingBehaviorEditor;
    private IgbCategoryChart chart;

    private TemperatureAnnotatedData _temperatureAnnotatedData = null;
    public TemperatureAnnotatedData TemperatureAnnotatedData
    {
        get
        {
            if (_temperatureAnnotatedData == null)
            {
                _temperatureAnnotatedData = new TemperatureAnnotatedData();
            }
            return _temperatureAnnotatedData;
        }
    }

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

Blazor 차트 강조 모드 및 동작

모든 Blazor 차트는 다양한 강조 표시 옵션을 지원합니다. HighlightingMode 플롯 영역에 렌더링된 시리즈/데이터 항목 위로 마우스를 가져갈 때 밝아지거나 희미해지도록 설정할 수 있습니다. HighlightingBehavior 강조 표시 효과를 트리거하기 위해 바로 위 또는 가장 가까운 데이터 항목으로 설정할 수 있습니다. 강조 표시 모드와 동작은 IgbCategoryChart, IgbFinancialChart 및 IgbDataChart 컨트롤에서 지원되며 강조 표시 기능을 사용하기 위한 동일한 API를 가지고 있습니다.

다음 예제에서는 HighlightingMode Blazor 차트를 보여줍니다.

EXAMPLE

MODULES

DATA

RAZOR

CSS

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

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

using System;
using System.Collections.Generic;
public class TemperatureAnnotatedDataItem
{
    public double Index { get; set; }
    public string TempInfo { get; set; }
    public double Temperature { get; set; }
    public string Month { get; set; }
}

public class TemperatureAnnotatedData
    : List<TemperatureAnnotatedDataItem>
{
    public TemperatureAnnotatedData()
    {
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 0,
            TempInfo = @"27°C",
            Temperature = 27,
            Month = @"Jan"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 1,
            TempInfo = @"25°C",
            Temperature = 25,
            Month = @"Feb"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 2,
            TempInfo = @"21°C",
            Temperature = 21,
            Month = @"Mar"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 3,
            TempInfo = @"19°C",
            Temperature = 19,
            Month = @"Apr"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 4,
            TempInfo = @"16°C",
            Temperature = 16,
            Month = @"May"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 5,
            TempInfo = @"13°C",
            Temperature = 13,
            Month = @"Jun"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 6,
            TempInfo = @"14°C",
            Temperature = 14,
            Month = @"Jul"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 7,
            TempInfo = @"15°C",
            Temperature = 15,
            Month = @"Aug"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 8,
            TempInfo = @"19°C",
            Temperature = 19,
            Month = @"Sep"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 9,
            TempInfo = @"22°C",
            Temperature = 22,
            Month = @"Oct"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 10,
            TempInfo = @"26°C",
            Temperature = 26,
            Month = @"Nov"
        });
        this.Add(new TemperatureAnnotatedDataItem()
        {
            Index = 11,
            TempInfo = @"30°C",
            Temperature = 30,
            Month = @"Dec"
        });
    }
}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="HighlightingMode"
            Name="HighlightingModeEditor"
            @ref="highlightingModeEditor"
            Label="Highlighting Mode: "
            PrimitiveValue="@("BrightenSpecific")">
            </IgbPropertyEditorPropertyDescription>

        </IgbPropertyEditorPanel>

    </div>
    <div class="container vertical fill">
        <IgbCategoryChart
        Name="chart"
        @ref="chart"
        ChartType="CategoryChartType.Column"
        ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        DataSource="TemperatureAnnotatedData"
        HighlightingMode="SeriesHighlightingMode.BrightenSpecific"
        ToolTipType="ToolTipType.None"
        CrosshairsDisplayMode="CrosshairsDisplayMode.None"
        IsTransitionInEnabled="false">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

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

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

    }

    private IgbPropertyEditorPanel propertyEditor;
    private IgbPropertyEditorPropertyDescription highlightingModeEditor;
    private IgbCategoryChart chart;

    private TemperatureAnnotatedData _temperatureAnnotatedData = null;
    public TemperatureAnnotatedData TemperatureAnnotatedData
    {
        get
        {
            if (_temperatureAnnotatedData == null)
            {
                _temperatureAnnotatedData = new TemperatureAnnotatedData();
            }
            return _temperatureAnnotatedData;
        }
    }

}razorコピー

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

다음 예제에서는 HighlightingBehavior Blazor 차트를 보여줍니다.

EXAMPLE

Blazor 차트 범례 강조

모든 Blazor 차트는 범례 강조 표시를 지원합니다. LegendHighlightingMode 활성화하면 마우스가 범례 마커 항목 위에 있을 때 렌더링된 시리즈가 플롯 영역에서 강조 표시됩니다. 범례 강조 표시는 IgbCategoryChart, IgbFinancialChart 및 IgbDataChart 컨트롤에서 지원되며 강조 표시 기능을 사용하기 위한 동일한 API를 갖습니다.

다음 예는 Blazor 차트를 강조하는 범례 시리즈를 보여줍니다.

EXAMPLE

Highlight Layers

Ignite UI for Blazor IgbCategoryChart 데이터 항목 위에 마우스를 올리면 세 가지 유형의 강조 표시를 활성화할 수 있습니다.

1. 계열 강조 표시는 포인터가 마커나 열 위에 있을 때 표시되는 단일 데이터 포인트를 강조 표시합니다. 이는 IsSeriesHighlightingEnabled 속성을 true로 설정하여 활성화됩니다.

2. 항목 강조 표시는 해당 위치에 줄무늬 모양을 그리거나 해당 위치에 마커를 렌더링하여 시리즈의 항목을 강조 표시합니다. IsItemHighlightingEnabled 속성을 true로 설정하면 활성화됩니다.

3. 범주 강조 표시는 차트의 모든 범주 축을 대상으로 합니다. 포인터 위치에 가장 가까운 축 영역을 비추는 모양을 그립니다. 이는 IsCategoryHighlightingEnabled 속성을 true로 설정하여 활성화됩니다.

다음 예제는 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(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コピー

Additional Resources

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

• 차트 애니메이션
• 차트 주석
• 차트 툴팁

API References

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

• HighlightingMode
• HighlightingBehavior
• LegendHighlightingBehavior
• IsCategoryHighlightingEnabled
• IsItemHighlightingEnabled
• IsSeriesHighlightingEnabled
• IgbCategoryChart
• IgbDataChart
• IgbFinancialChart