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

無料で試してみる

Blazor チャートのハイライト表示の例

以下の例は、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コピー

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

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

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="HighlightingBehavior"
            Name="HighlightingBehaviorEditor"
            @ref="highlightingBehaviorEditor"
            Label="Highlighting Behavior: "
            PrimitiveValue="@("DirectlyOver")">
            </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.Brighten"
        HighlightingBehavior="SeriesHighlightingBehavior.DirectlyOver"
        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 highlightingBehaviorEditor = this.highlightingBehaviorEditor;
        var chart = this.chart;

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

    }

    private IgbPropertyEditorPanel propertyEditor;
    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コピー

Blazor チャート凡例のハイライト表示

すべての Blazor チャートは、凡例のハイライト表示をサポートしています。LegendHighlightingMode を有効にすると、マウスが凡例マーカー項目にカーソルを合わせると、描画されたシリーズがプロット領域でハイライト表示されます。凡例のハイライト表示は、IgbCategoryChart、IgbFinancialChart、および IgbDataChart コントロールでサポートされており、ハイライト表示機能を使用するための同じ API を備えています。

以下の例は、凡例シリーズハイライト表示の 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(IgbLegendModule),
                typeof(IgbCategoryChartModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

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

<div class="container vertical">
    <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"
        HighlightingMode="SeriesHighlightingMode.Brighten"
        LegendHighlightingMode="LegendHighlightingMode.MatchSeries"
        IsTransitionInEnabled="false">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

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

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

    }

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

ハイライト表示レイヤー

Ignite UI for Blazor IgbCategoryChart は、データ項目にカーソルを合わせると 3 種類のハイライト表示を有効にできます。

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

その他のリソース

関連するチャートタイプの詳細については、以下のトピックを参照してください。

• チャート アニメーション
• チャート注釈
• チャート ツールチップ

API リファレンス

以下は、上記のセクションで説明した API メンバーのリストです。

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