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

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

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

フィルター式 (英語)

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

Web Components チャート データ フィルターの例

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

EXAMPLE

DATA

TS

HTML

CSS

export class ContinentsBirthRateItem {
    public constructor(init: Partial<ContinentsBirthRateItem>) {
        Object.assign(this, init);
    }

    public Year: string;
    public Asia: number;
    public Africa: number;
    public Europe: number;
    public NorthAmerica: number;
    public SouthAmerica: number;
    public Oceania: number;

}
export class ContinentsBirthRate extends Array<ContinentsBirthRateItem> {
    public constructor(items: Array<ContinentsBirthRateItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new ContinentsBirthRateItem(
                {
                    Year: `1950`,
                    Asia: 62,
                    Africa: 13,
                    Europe: 10,
                    NorthAmerica: 4,
                    SouthAmerica: 8,
                    Oceania: 1
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `1960`,
                    Asia: 68,
                    Africa: 12,
                    Europe: 15,
                    NorthAmerica: 4,
                    SouthAmerica: 9,
                    Oceania: 2
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `1970`,
                    Asia: 80,
                    Africa: 17,
                    Europe: 11,
                    NorthAmerica: 3,
                    SouthAmerica: 9,
                    Oceania: 1
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `1980`,
                    Asia: 77,
                    Africa: 21,
                    Europe: 12,
                    NorthAmerica: 3,
                    SouthAmerica: 10,
                    Oceania: 2
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `1990`,
                    Asia: 87,
                    Africa: 24,
                    Europe: 9,
                    NorthAmerica: 3,
                    SouthAmerica: 10,
                    Oceania: 1
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `2000`,
                    Asia: 79,
                    Africa: 28,
                    Europe: 8,
                    NorthAmerica: 4,
                    SouthAmerica: 9,
                    Oceania: 3
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `2010`,
                    Asia: 78,
                    Africa: 35,
                    Europe: 10,
                    NorthAmerica: 4,
                    SouthAmerica: 8,
                    Oceania: 2
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `2020`,
                    Asia: 75,
                    Africa: 43,
                    Europe: 7,
                    NorthAmerica: 4,
                    SouthAmerica: 7,
                    Oceania: 4
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
import { MarkerType, MarkerType_$type } from 'igniteui-webcomponents-charts';
import { EnumUtil } from 'igniteui-webcomponents-core';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule,
    IgcLegendModule,
    IgcCategoryChartModule
);

export class Sample {

    private legend: IgcLegendComponent
    private editor: IgcPropertyEditorPanelComponent
    private initialFilter: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var editor = this.editor = document.getElementById('editor') as IgcPropertyEditorPanelComponent;
        var initialFilter = this.initialFilter = document.getElementById('InitialFilter') as IgcPropertyEditorPropertyDescriptionComponent;
        this.editorChangeDataFilter = this.editorChangeDataFilter.bind(this);
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            editor.componentRenderer = this.renderer;
            editor.target = this.chart;
            initialFilter.changed = this.editorChangeDataFilter;
            chart.dataSource = this.continentsBirthRate;
            chart.legend = this.legend;
        }
        this._bind();
    }

    private _continentsBirthRate: ContinentsBirthRate = null;
    public get continentsBirthRate(): ContinentsBirthRate {
        if (this._continentsBirthRate == null)
        {
            this._continentsBirthRate = new ContinentsBirthRate();
        }
        return this._continentsBirthRate;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            LegendDescriptionModule.register(context);
            CategoryChartDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public editorChangeDataFilter(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {

        var chart = this.chart;
        var filter = args.newValue.toString();
        chart.initialFilter = "(contains(Year," + "'" + filter + "'" + "))";
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options vertical">
        <igc-property-editor-panel
        name="editor"
        id="editor"
        description-type="CategoryChart"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            property-path="InitialFilterHandler"
            name="InitialFilter"
            id="InitialFilter"
            label="Modify Filter"
            value-type="EnumValue"
            should-override-default-editor="true"
            drop-down-names="1950, 1960, 1970, 1980, 1990, 2000, 2010, 2020"
            drop-down-values="1950, 1960, 1970, 1980, 1990, 2000, 2010, 2020">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="legend-title">
        Annual Birth Rates by World Region
    </div>

    <div class="legend">
        <igc-legend
        name="legend"
        id="legend"
        orientation="Horizontal">
        </igc-legend>
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        chart-type="Column"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        crosshairs-display-mode="None"
        y-axis-label-format="{0}M">
        </igc-category-chart>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssコピー

Edit in: Codesandbox

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

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 メンバーのリストです。

• IgcCategoryChartComponent
• isTransitionInEnabled
• transitionInDuration
• transitionInMode