Angular チャートのデータ フィルタリング
データ フィルタリングを使用すると、チャートにバインド表示されたデータ ソースを手動で変更することなく、大規模なデータをクエリし、フィルター式を使用してデータ エントリの小さなサブセットを分析およびプロットすることができます。
クエリ文字列を形成する有効な式とキーワードの完全なリストは、以下で見つけられます:
注: 不適切なフィルターを適用すると、空のチャートが表示されます。
60 以上のリアルタイム Angular チャート を使用して、何百万ものデータ ポイントを描画し、視覚化を構築します。これは、あらゆるアプリケーション シナリオに対応する最も広範なチャート ライブラリです。
Angular チャート データ フィルターの例
次の例は、数十年間の年間出生率の縦棒チャートを示しています。ドロップダウンで年代を選択すると initialFilter
プロパティによって式が挿入され、チャートのビジュアルが更新されます。
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));
}
}
}
tsimport { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts';
import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxPropertyEditorPanelModule,
IgxLegendModule,
IgxCategoryChartModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core';
import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
import { IgxPropertyEditorPropertyDescriptionChangedEventArgs, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';
import { IgxCategoryChartComponent, MarkerType, MarkerType_$type } from 'igniteui-angular-charts';
import { EnumUtil } from 'igniteui-angular-core';
import { IgxLegendComponent } from 'igniteui-angular-charts';
import { IgxPropertyEditorPanelComponent } from 'igniteui-angular-layouts';
import { defineAllComponents } from 'igniteui-webcomponents';
defineAllComponents();
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("editor", { static: true } )
private editor: IgxPropertyEditorPanelComponent
@ViewChild("initialFilter", { static: true } )
private initialFilter: IgxPropertyEditorPropertyDescriptionComponent
@ViewChild("chart", { static: true } )
private chart: IgxCategoryChartComponent
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 constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
public editorChangeDataFilter({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void {
var chart = this.chart;
var filter = args.newValue.toString();
chart.initialFilter = "(contains(Year," + "'" + filter + "'" + "))";
}
}
ts<div class="container vertical sample">
<div class="options vertical">
<igx-property-editor-panel
name="editor"
#editor
[componentRenderer]="renderer"
[target]="chart"
descriptionType="CategoryChart"
isHorizontal="true"
isWrappingEnabled="true">
<igx-property-editor-property-description
propertyPath="InitialFilterHandler"
name="InitialFilter"
#initialFilter
label="Modify Filter"
valueType="EnumValue"
shouldOverrideDefaultEditor="true"
dropDownNames="1950, 1960, 1970, 1980, 1990, 2000, 2010, 2020"
dropDownValues="1950, 1960, 1970, 1980, 1990, 2000, 2010, 2020"
(changed)="this.editorChangeDataFilter($event)">
</igx-property-editor-property-description>
</igx-property-editor-panel>
</div>
<div class="legend-title">
Annual Birth Rates by World Region
</div>
<div class="legend">
<igx-legend
name="legend"
#legend
orientation="Horizontal">
</igx-legend>
</div>
<div class="container fill">
<igx-category-chart
name="chart"
#chart
[dataSource]="continentsBirthRate"
[legend]="legend"
chartType="Column"
isHorizontalZoomEnabled="false"
isVerticalZoomEnabled="false"
crosshairsDisplayMode="None"
yAxisLabelFormat="{0}M">
</igx-category-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
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 メンバーのリストです。