Blazor チャートのデータ フィルタリング

データ フィルタリングを使用すると、チャートにバインド表示されたデータ ソースを手動で変更することなく、大規模なデータをクエリし、フィルター式を使用してデータ エントリの小さなサブセットを分析およびプロットすることができます。

クエリ文字列を形成する有効な式とキーワードの完全なリストは、以下で見つけられます:

フィルター式 (英語)

注: 不適切なフィルターを適用すると、空のチャートが表示されます。

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

無料で試してみる

Blazor チャート データ フィルターの例

次の例は、数十年間の年間出生率の縦棒チャートを示しています。ドロップダウンで年代を選択すると InitialFilter プロパティによって式が挿入され、チャートのビジュアルが更新されます。

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

using System;
using System.Collections.Generic;
public class ContinentsBirthRateItem
{
    public string Year { get; set; }
    public double Asia { get; set; }
    public double Africa { get; set; }
    public double Europe { get; set; }
    public double NorthAmerica { get; set; }
    public double SouthAmerica { get; set; }
    public double Oceania { get; set; }
}

public class ContinentsBirthRate
    : List<ContinentsBirthRateItem>
{
    public ContinentsBirthRate()
    {
        this.Add(new ContinentsBirthRateItem()
        {
            Year = @"1950",
            Asia = 62,
            Africa = 13,
            Europe = 10,
            NorthAmerica = 4,
            SouthAmerica = 8,
            Oceania = 1
        });
        this.Add(new ContinentsBirthRateItem()
        {
            Year = @"1960",
            Asia = 68,
            Africa = 12,
            Europe = 15,
            NorthAmerica = 4,
            SouthAmerica = 9,
            Oceania = 2
        });
        this.Add(new ContinentsBirthRateItem()
        {
            Year = @"1970",
            Asia = 80,
            Africa = 17,
            Europe = 11,
            NorthAmerica = 3,
            SouthAmerica = 9,
            Oceania = 1
        });
        this.Add(new ContinentsBirthRateItem()
        {
            Year = @"1980",
            Asia = 77,
            Africa = 21,
            Europe = 12,
            NorthAmerica = 3,
            SouthAmerica = 10,
            Oceania = 2
        });
        this.Add(new ContinentsBirthRateItem()
        {
            Year = @"1990",
            Asia = 87,
            Africa = 24,
            Europe = 9,
            NorthAmerica = 3,
            SouthAmerica = 10,
            Oceania = 1
        });
        this.Add(new ContinentsBirthRateItem()
        {
            Year = @"2000",
            Asia = 79,
            Africa = 28,
            Europe = 8,
            NorthAmerica = 4,
            SouthAmerica = 9,
            Oceania = 3
        });
        this.Add(new ContinentsBirthRateItem()
        {
            Year = @"2010",
            Asia = 78,
            Africa = 35,
            Europe = 10,
            NorthAmerica = 4,
            SouthAmerica = 8,
            Oceania = 2
        });
        this.Add(new ContinentsBirthRateItem()
        {
            Year = @"2020",
            Asia = 75,
            Africa = 43,
            Europe = 7,
            NorthAmerica = 4,
            SouthAmerica = 7,
            Oceania = 4
        });
    }
}csコピー

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

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

        DescriptionType="CategoryChart"
        IsHorizontal="true"
        IsWrappingEnabled="true">
            <IgbPropertyEditorPropertyDescription
            PropertyPath="InitialFilterHandler"
            Name="InitialFilter"
            @ref="initialFilter"
            Label="Modify Filter"
            ValueType="PropertyEditorValueType.EnumValue"
            ShouldOverrideDefaultEditor="true"
            DropDownNames="@(new string[] { "1950", "1960", "1970", "1980", "1990", "2000", "2010", "2020" })"
            DropDownValues="@(new string[] { "1950", "1960", "1970", "1980", "1990", "2000", "2010", "2020" })"
            Changed="EditorChangeDataFilter">
            </IgbPropertyEditorPropertyDescription>

        </IgbPropertyEditorPanel>

    </div>
    <div class="legend-title">
        Annual Birth Rates by World Region
    </div>
    <div class="legend">
        <IgbLegend
        Name="legend"
        @ref="legend"
        Orientation="LegendOrientation.Horizontal">
        </IgbLegend>

    </div>
    <div class="container vertical fill">
        <IgbCategoryChart
        Name="chart"
        @ref="chart"
        DataSource="ContinentsBirthRate"
        ChartType="CategoryChartType.Column"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        CrosshairsDisplayMode="CrosshairsDisplayMode.None"
        YAxisLabelFormat="{0}M">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

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

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

    }

    private IgbLegend legend;
    private IgbPropertyEditorPanel editor;
    private IgbPropertyEditorPropertyDescription initialFilter;
    private IgbCategoryChart chart;

    public void EditorChangeDataFilter(IgbPropertyEditorPropertyDescriptionChangedEventArgs args)
    {
        var chart = this.chart;
        var filter = args.NewValue.ToString();
        chart.InitialFilter = "(contains(Year," + "'" + filter + "'" + "))";
    }

    private ContinentsBirthRate _continentsBirthRate = null;
    public ContinentsBirthRate ContinentsBirthRate
    {
        get
        {
            if (_continentsBirthRate == null)
            {
                _continentsBirthRate = new ContinentsBirthRate();
            }
            return _continentsBirthRate;
        }
    }

}razorコピー

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

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

InitialFilter プロパティは、適切にフィルター処理するために次の構文を必要とする文字列です。値には、フィルターするレコードに関連付したフィルター式の定義、列と値の両方を含む括弧のセットが必要です。

例: 文字 B で始まる国をすべて表示する:

"(startswith(Country, 'B'))"

例: 複数の式を連結する:

"(startswith(Country, 'B') and endswith(Country, 'L') and contains(Product, 'Royal Oak') and contains(Date, '3/1/20'))"

その他のリソース

関連するチャート機能の詳細については、次のトピックを参照してください。

• チャートの注釈
• チャートのハイライト表示
• チャートのツールチップ

API リファレンス

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

• IgbCategoryChart
• IsTransitionInEnabled
• TransitionInDuration
• TransitionInMode