Components List

Angular チャートの選択

Angular {ComponentTitle} の Ignite UI for Angular 選択機能を使用すると、ユーザーはチャート内の単一または複数のシリーズを対話的に選択、ハイライト表示、アウトライン表示したり、その逆の選択を解除したりできます。これにより、提示されたデータをユーザーがより意味のある方法で操作するさまざまな可能性が提供されます。

選択の設定

デフォルトの動作 selectionMode はオフになっており、次のいずれかのオプションを選択する必要があります。{ComponentName} に使用可能な選択モードがいくつかあります。

Auto
None
Brighten
FadeOthers
GrayscaleOthers
FocusColorThickOutline
FocusColorOutline
SelectionColorThickOutline
SelectionColorOutline
FocusColorFill
SelectionColorFill
ThickOutline

Brighten は選択した項目をフェードアウトしますが、FadeOthers は反対の効果を引き起こします。 GrayscaleOthers は FadeOthers と同様に動作しますが、シリーズの残りの部分にはグレー色を表示します。これは selectionBrush 設定をオーバーライドすることに注意してください。 SelectionColorOutline と SelectionColorThickOutline はシリーズの周囲に境界線を描画します。

併せて、どの項目を選択するかをより細かく制御できる selectionBehavior も利用できます。Auto のデフォルトの動作は PerSeriesAndDataItemMultiSelect です。

Auto
PerDataItemMultiSelect
PerDataItemSingleSelect
PerSeriesAndDataItemMultiSelect
PerSeriesAndDataItemSingleSelect
PerSeriesAndDataItemGlobalSingleSelect
PerSeriesMultiSelect
PerSeriesSingleSelect

Color Fill (塗りつぶし) による選択の設定

次の例は、SelectionColorFill と Auto の両方の選択動作の組み合わせ、つまり PerSeriesAndDataItemMultiSelect を示しています。塗りつぶしは、シリーズ項目全体の背景色を変更するため、便利な視覚的な合図を提供します。各項目をクリックすると、項目が緑から紫に変わります。

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

    public month: string;
    public temperature: number;

}
export class TemperatureAverageData extends Array<TemperatureAverageDataItem> {
    public constructor(items: Array<TemperatureAverageDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new TemperatureAverageDataItem(
                {
                    month: `Jan`,
                    temperature: 3
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Feb`,
                    temperature: 4
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Mar`,
                    temperature: 9
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Apr`,
                    temperature: 15
                }),
                new TemperatureAverageDataItem(
                {
                    month: `May`,
                    temperature: 21
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Jun`,
                    temperature: 26
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Jul`,
                    temperature: 29
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Aug`,
                    temperature: 28
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Sep`,
                    temperature: 24
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Oct`,
                    temperature: 18
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Nov`,
                    temperature: 11
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Dec`,
                    temperature: 5
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { 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 { IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxCategoryChartModule,
    IgxDataChartInteractivityModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
ts

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { TemperatureAverageDataItem, TemperatureAverageData } from './TemperatureAverageData';
import { IgxCategoryChartComponent } from 'igniteui-angular-charts';

@Component({
    standalone: false,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class AppComponent implements AfterViewInit
{

    @ViewChild("chart", { static: true } )
    private chart: IgxCategoryChartComponent
    private _temperatureAverageData: TemperatureAverageData = null;
    public get temperatureAverageData(): TemperatureAverageData {
        if (this._temperatureAverageData == null)
        {
            this._temperatureAverageData = new TemperatureAverageData();
        }
        return this._temperatureAverageData;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

ts

<div class="container vertical sample">
  <div class="legend-title">
      Average Temperature Range in New York
  </div>
  <div class="container fill">
      <igx-category-chart
      name="chart"
      #chart
      chartType="Column"
      [dataSource]="temperatureAverageData"
      yAxisTitle="Temperature in Degrees Celsius"
      yAxisTitleLeftMargin="10"
      yAxisTitleRightMargin="5"
      yAxisLabelLeftMargin="0"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      crosshairsDisplayMode="None"
      toolTipType="None"
      selectionMode="SelectionColorFill"
      selectionBehavior="Auto"
      selectionBrush="purple"
      focusBrush="purple">
      </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ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

複数選択の構成

その他の選択モードでは、さまざまな選択方法が提供されます。たとえば、PerDataItemMultiSelect とともに selectionBehavior を使用すると、複数のシリーズが存在する場合にカテゴリ全体のすべてのシリーズに影響し、カテゴリ間での選択が可能になります。PerDataItemSingleSelect と比較すると、一度に選択できるのは 1 つのカテゴリの項目のみです。これは、複数のシリーズが異なるデータソースにバインドされている場合に役立ち、カテゴリ間の選択をより細かく制御できます。 PerSeriesAndDataItemGlobalSingleSelect を使用すると、一度にすべてのカテゴリで単一のシリーズを選択できます。

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

    public location: string;
    public year: number;
    public hydro: number;
    public solar: number;
    public wind: number;
    public other: number;

}
export class EnergyRenewableConsumption extends Array<EnergyRenewableConsumptionItem> {
    public constructor(items: Array<EnergyRenewableConsumptionItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EnergyRenewableConsumptionItem(
                {
                    location: `China`,
                    year: 2019,
                    hydro: 1269.5,
                    solar: 223,
                    wind: 405.2,
                    other: 102.8
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Europe`,
                    year: 2019,
                    hydro: 632.54,
                    solar: 154,
                    wind: 461.3,
                    other: 220.3
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `USA`,
                    year: 2019,
                    hydro: 271.16,
                    solar: 108,
                    wind: 303.4,
                    other: 78.34
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Brazil`,
                    year: 2019,
                    hydro: 399.3,
                    solar: 5.5,
                    wind: 55.83,
                    other: 56.25
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Canada`,
                    year: 2019,
                    hydro: 381.98,
                    solar: 4.3,
                    wind: 34.17,
                    other: 10.81
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { 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 {}
ts

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core';
import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } 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("propertyEditor", { static: true } )
    private propertyEditor: IgxPropertyEditorPanelComponent
    @ViewChild("selectionModeEditor", { static: true } )
    private selectionModeEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("selectionBehaviorEditor", { static: true } )
    private selectionBehaviorEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxCategoryChartComponent
    private _energyRenewableConsumption: EnergyRenewableConsumption = null;
    public get energyRenewableConsumption(): EnergyRenewableConsumption {
        if (this._energyRenewableConsumption == null)
        {
            this._energyRenewableConsumption = new EnergyRenewableConsumption();
        }
        return this._energyRenewableConsumption;
    }

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

}

ts

<div class="container vertical sample">
  <div class="options vertical">
      <igx-property-editor-panel
      name="PropertyEditor"
      #propertyEditor
      [componentRenderer]="renderer"
      [target]="chart"
      descriptionType="CategoryChart"
      isHorizontal="true"
      isWrappingEnabled="true">
          <igx-property-editor-property-description
          propertyPath="SelectionMode"
          name="SelectionModeEditor"
          #selectionModeEditor
          label="Selection Mode: "
          primitiveValue="SelectionColorFill">
          </igx-property-editor-property-description>
          <igx-property-editor-property-description
          propertyPath="SelectionBehavior"
          name="SelectionBehaviorEditor"
          #selectionBehaviorEditor
          label="Selection Behavior: "
          primitiveValue="PerSeriesAndDataItemGlobalSingleSelect">
          </igx-property-editor-property-description>
      </igx-property-editor-panel>
  </div>
  <div class="legend-title">
      Highest Grossing Movie Franchises
  </div>
  <div class="legend">
      <igx-legend
      name="legend"
      #legend
      orientation="Horizontal">
      </igx-legend>
  </div>
  <div class="container fill">
      <igx-category-chart
      name="chart"
      #chart
      chartType="Column"
      [dataSource]="energyRenewableConsumption"
      [legend]="legend"
      yAxisTitleLeftMargin="10"
      yAxisTitleRightMargin="5"
      yAxisLabelLeftMargin="0"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      crosshairsDisplayMode="None"
      selectionMode="SelectionColorFill"
      selectionBehavior="PerSeriesAndDataItemGlobalSingleSelect"
      selectionBrush="orange"
      focusBrush="orange">
      </igx-category-chart>
  </div>
</div>
html

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss

アウトライン選択の構成

focusBrush を適用すると、selectionMode プロパティがフォーカスオプションの 1 つに設定されている場合に、選択されたシリーズが境界線付きで表示されます。

ラジアルシリーズの選択

この例では、各ラジアルシリーズを異なる色で選択できる IgxDataChartComponent を介した別のシリーズタイプを示します。

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

    public attribute: string;
    public ronaldo: number;
    public messi: number;

}
export class FootballPlayerStats extends Array<FootballPlayerStatsItem> {
    public constructor(items: Array<FootballPlayerStatsItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new FootballPlayerStatsItem(
                {
                    attribute: `Dribbling`,
                    ronaldo: 8,
                    messi: 10
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Passing`,
                    ronaldo: 8,
                    messi: 10
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Finishing`,
                    ronaldo: 10,
                    messi: 10
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Free Kicks`,
                    ronaldo: 8,
                    messi: 9
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Penalties`,
                    ronaldo: 9,
                    messi: 7
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Physical`,
                    ronaldo: 10,
                    messi: 7
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Team Play`,
                    ronaldo: 7,
                    messi: 9
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Heading`,
                    ronaldo: 9,
                    messi: 6
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { 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 { IgxDataChartCoreModule, IgxDataChartRadialModule, IgxDataChartRadialCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxLegendModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxDataChartCoreModule,
    IgxDataChartRadialModule,
    IgxDataChartRadialCoreModule,
    IgxDataChartInteractivityModule,
    IgxDataChartAnnotationModule,
    IgxLegendModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
ts

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats';
import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryAngleAxisComponent, IgxNumericRadiusAxisComponent, IgxRadialColumnSeriesComponent } from 'igniteui-angular-charts';

@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("chart", { static: true } )
    private chart: IgxDataChartComponent
    @ViewChild("angleAxis", { static: true } )
    private angleAxis: IgxCategoryAngleAxisComponent
    @ViewChild("radiusAxis", { static: true } )
    private radiusAxis: IgxNumericRadiusAxisComponent
    @ViewChild("radialColumnSeries1", { static: true } )
    private radialColumnSeries1: IgxRadialColumnSeriesComponent
    @ViewChild("radialColumnSeries2", { static: true } )
    private radialColumnSeries2: IgxRadialColumnSeriesComponent
    private _footballPlayerStats: FootballPlayerStats = null;
    public get footballPlayerStats(): FootballPlayerStats {
        if (this._footballPlayerStats == null)
        {
            this._footballPlayerStats = new FootballPlayerStats();
        }
        return this._footballPlayerStats;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

ts

<div class="container vertical sample">
  <div class="legend-title">
      Ronaldo vs Messi Player Stats
  </div>
  <div class="legend">
      <igx-legend
      name="legend"
      #legend
      orientation="Horizontal">
      </igx-legend>
  </div>
  <div class="container fill">
      <igx-data-chart
      name="chart"
      #chart
      [legend]="legend"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      selectionMode="SelectionColorFill"
      selectionBehavior="PerSeriesMultiSelect">
          <igx-category-angle-axis
          name="angleAxis"
          #angleAxis
          [dataSource]="footballPlayerStats"
          label="attribute">
          </igx-category-angle-axis>
          <igx-numeric-radius-axis
          name="radiusAxis"
          #radiusAxis
          innerRadiusExtentScale="0.1"
          interval="2"
          minimumValue="0"
          maximumValue="10">
          </igx-numeric-radius-axis>
          <igx-radial-column-series
          name="RadialColumnSeries1"
          #radialColumnSeries1
          [dataSource]="footballPlayerStats"
          [angleAxis]="angleAxis"
          [valueAxis]="radiusAxis"
          valueMemberPath="ronaldo"
          showDefaultTooltip="false"
          areaFillOpacity="0.8"
          thickness="3"
          title="Ronaldo"
          selectionBrush="yellow">
          </igx-radial-column-series>
          <igx-radial-column-series
          name="RadialColumnSeries2"
          #radialColumnSeries2
          [dataSource]="footballPlayerStats"
          [angleAxis]="angleAxis"
          [valueAxis]="radiusAxis"
          valueMemberPath="messi"
          showDefaultTooltip="false"
          areaFillOpacity="0.8"
          thickness="3"
          title="Messi"
          selectionBrush="cyan">
          </igx-radial-column-series>
      </igx-data-chart>
  </div>
</div>
html

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss

プログラムによる選択

チャートの選択項目は、起動時や実行時にチャートの選択項目を表示するようにコードで設定することもできます。これは、IgxCategoryChartComponent の SelectedSeriesCollection に項目を追加することで実現できます。IgxChartSelection オブジェクトの matcher プロパティを使用すると、「マッチャー」に基づいてシリーズを選択できます。これはチャートから実際のシリーズにアクセスできない場合に最適です。データソースに含まれるプロパティがわかっていれば、シリーズが使用される ValueMemberPath を使用できます。

マッチャーは、IgxDataChartComponent のように実際のシリーズにアクセスできない場合、IgxCategoryChartComponent などのチャートで使用するのに最適です。この場合、データソースに含まれるプロパティがわかっていれば、シリーズに含まれる ValueMemberPaths を推測できます。たとえば、データソースに Nuclear、Coal、Oil、Solar という数値プロパティがある場合、これらのプロパティごとにシリーズが作成されていることがわかります。Solar 値にバインドされたシリーズをハイライト表示する場合は、次のプロパティが設定されたマッチャーを使用して、ChartSelection オブジェクトを selectedSeriesItems コレクションに追加できます。

たとえば、データソースに Nuclear、Coal、Oil、Solar という数値プロパティがある場合、これらのプロパティごとにシリーズが作成されていることがわかります。Solar 値にバインドされたシリーズを選択する場合は、次のプロパティが設定されたマッチャーを使用して、ChartSelection オブジェクトを SelectedSeriesItems コレクションに追加できます。

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

    public location: string;
    public year: number;
    public hydro: number;
    public solar: number;
    public wind: number;
    public other: number;

}
export class EnergyRenewableConsumption extends Array<EnergyRenewableConsumptionItem> {
    public constructor(items: Array<EnergyRenewableConsumptionItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EnergyRenewableConsumptionItem(
                {
                    location: `China`,
                    year: 2019,
                    hydro: 1269.5,
                    solar: 223,
                    wind: 405.2,
                    other: 102.8
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Europe`,
                    year: 2019,
                    hydro: 632.54,
                    solar: 154,
                    wind: 461.3,
                    other: 220.3
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `USA`,
                    year: 2019,
                    hydro: 271.16,
                    solar: 108,
                    wind: 303.4,
                    other: 78.34
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Brazil`,
                    year: 2019,
                    hydro: 399.3,
                    solar: 5.5,
                    wind: 55.83,
                    other: 56.25
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Canada`,
                    year: 2019,
                    hydro: 381.98,
                    solar: 4.3,
                    wind: 34.17,
                    other: 10.81
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { 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 { IgxLegendModule, IgxCategoryChartModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxDataChartCoreModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxLegendModule,
    IgxCategoryChartModule,
    IgxDataChartAnnotationModule,
    IgxDataChartInteractivityModule,
    IgxDataChartCoreModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
ts

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, LegendDescriptionModule, CategoryChartDescriptionModule, DataChartAnnotationDescriptionModule, DataChartInteractivityDescriptionModule, DataChartCoreDescriptionModule } from 'igniteui-angular-core';
import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
import { IgxCategoryChartComponent, IgxChartSelection, IgxSeriesMatcher } from 'igniteui-angular-charts';
import { IgxLegendComponent } from 'igniteui-angular-charts';

@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("chart", { static: true } )
    private chart: IgxCategoryChartComponent
    private _energyRenewableConsumption: EnergyRenewableConsumption = null;
    public get energyRenewableConsumption(): EnergyRenewableConsumption {
        if (this._energyRenewableConsumption == null)
        {
            this._energyRenewableConsumption = new EnergyRenewableConsumption();
        }
        return this._energyRenewableConsumption;
    }

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

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
        this.selectionMatcherOnViewInit();
    }

    private _timer: ReturnType<typeof setInterval>;

    public selectionMatcherOnViewInit(): void {

        var chart = this.chart;

        this._timer = setTimeout(() => {
            var data = this.energyRenewableConsumption;
            let matcher: IgxSeriesMatcher = new IgxSeriesMatcher();

            let selection: IgxChartSelection = new IgxChartSelection();
            selection.item = data[1];
            matcher.memberPath = "hydro";
            matcher.memberPathType = "ValueMemberPath";
            selection.matcher = matcher;
            chart.selectedSeriesItems.add(selection);

            let matcher2: IgxSeriesMatcher = new IgxSeriesMatcher();
            let selection2: IgxChartSelection = new IgxChartSelection();
            selection2.item = data[2];
            matcher2.memberPath = "wind";
            matcher2.memberPathType = "ValueMemberPath";
            selection2.matcher = matcher2;

            chart.selectedSeriesItems.add(selection2);

        }, 100);
    }

}

ts

<div class="container vertical sample">
  <div class="legend-title">
      Renewable Electricity Generated
  </div>
  <div class="legend">
      <igx-legend
      name="legend"
      #legend
      orientation="Horizontal">
      </igx-legend>
  </div>
  <div class="container fill">
      <igx-category-chart
      name="chart"
      #chart
      [legend]="legend"
      [dataSource]="energyRenewableConsumption"
      chartType="Column"
      crosshairsDisplayMode="None"
      yAxisTitle="TWh"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      selectionMode="SelectionColorFill"
      selectionBehavior="Auto"
      selectionBrush="orange">
      </igx-category-chart>
  </div>
</div>
html

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss

API リファレンス

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

`IgxCategoryChartComponent` プロパティ	`IgxDataChartComponent` プロパティ