Components List

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

以下の例は、Angular チャートで使用できるさまざまなハイライト表示オプションを示しています。

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

    public index: number;
    public tempInfo: string;
    public temperature: number;
    public month: string;

}
export class TemperatureAnnotatedData extends Array<TemperatureAnnotatedDataItem> {
    public constructor(items: Array<TemperatureAnnotatedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new TemperatureAnnotatedDataItem(
                {
                    index: 0,
                    tempInfo: `27°C`,
                    temperature: 27,
                    month: `Jan`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 1,
                    tempInfo: `25°C`,
                    temperature: 25,
                    month: `Feb`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 2,
                    tempInfo: `21°C`,
                    temperature: 21,
                    month: `Mar`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 3,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Apr`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 4,
                    tempInfo: `16°C`,
                    temperature: 16,
                    month: `May`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 5,
                    tempInfo: `13°C`,
                    temperature: 13,
                    month: `Jun`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 6,
                    tempInfo: `14°C`,
                    temperature: 14,
                    month: `Jul`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 7,
                    tempInfo: `15°C`,
                    temperature: 15,
                    month: `Aug`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 8,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Sep`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 9,
                    tempInfo: `22°C`,
                    temperature: 22,
                    month: `Oct`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 10,
                    tempInfo: `26°C`,
                    temperature: 26,
                    month: `Nov`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 11,
                    tempInfo: `30°C`,
                    temperature: 30,
                    month: `Dec`
                }),
            ];
            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 { IgxCategoryChartModule } from 'igniteui-angular-charts';

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

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core';
import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';
import { IgxCategoryChartComponent } from 'igniteui-angular-charts';

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("propertyEditor", { static: true } )
    private propertyEditor: IgxPropertyEditorPanelComponent
    @ViewChild("highlightingModeEditor", { static: true } )
    private highlightingModeEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("highlightingBehaviorEditor", { static: true } )
    private highlightingBehaviorEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxCategoryChartComponent
    private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
    public get temperatureAnnotatedData(): TemperatureAnnotatedData {
        if (this._temperatureAnnotatedData == null)
        {
            this._temperatureAnnotatedData = new TemperatureAnnotatedData();
        }
        return this._temperatureAnnotatedData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.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="HighlightingMode"
          name="HighlightingModeEditor"
          #highlightingModeEditor
          label="Highlighting Mode: "
          primitiveValue="FadeOthersSpecific">
          </igx-property-editor-property-description>
          <igx-property-editor-property-description
          propertyPath="HighlightingBehavior"
          name="HighlightingBehaviorEditor"
          #highlightingBehaviorEditor
          label="Highlighting Behavior: "
          primitiveValue="NearestItemsAndSeries">
          </igx-property-editor-property-description>
      </igx-property-editor-panel>
  </div>
  <div class="legend-title">
      Average Temperature in Sydney
  </div>
  <div class="container fill">
      <igx-category-chart
      name="chart"
      #chart
      chartType="Column"
      computedPlotAreaMarginMode="Series"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      [dataSource]="temperatureAnnotatedData"
      highlightingMode="FadeOthersSpecific"
      highlightingBehavior="NearestItemsAndSeries"
      yAxisMaximumValue="35"
      yAxisLabelLocation="OutsideRight"
      toolTipType="None"
      isTransitionInEnabled="false">
      </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ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

Angular チャートのハイライト表示モードと動作

すべての Angular チャートは、さまざまなハイライト表示オプションをサポートしています。highlightingMode は、プロット領域に描画されたシリーズ/データ項目にマウスを合わせたときに明るくまたはフェードするように設定できます。highlightingBehavior は、ハイライト表示の効果をトリガーするために、直接または最も近いデータ項目に設定できます。ハイライト表示のモードと動作は、IgxCategoryChartComponent、IgxFinancialChartComponent、および IgxDataChartComponent コントロールでサポートされており、ハイライト表示機能を使用するための同じ API を備えています。

以下の例は、highlightingMode Angular チャートを示しています。

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

    public index: number;
    public tempInfo: string;
    public temperature: number;
    public month: string;

}
export class TemperatureAnnotatedData extends Array<TemperatureAnnotatedDataItem> {
    public constructor(items: Array<TemperatureAnnotatedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new TemperatureAnnotatedDataItem(
                {
                    index: 0,
                    tempInfo: `27°C`,
                    temperature: 27,
                    month: `Jan`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 1,
                    tempInfo: `25°C`,
                    temperature: 25,
                    month: `Feb`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 2,
                    tempInfo: `21°C`,
                    temperature: 21,
                    month: `Mar`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 3,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Apr`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 4,
                    tempInfo: `16°C`,
                    temperature: 16,
                    month: `May`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 5,
                    tempInfo: `13°C`,
                    temperature: 13,
                    month: `Jun`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 6,
                    tempInfo: `14°C`,
                    temperature: 14,
                    month: `Jul`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 7,
                    tempInfo: `15°C`,
                    temperature: 15,
                    month: `Aug`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 8,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Sep`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 9,
                    tempInfo: `22°C`,
                    temperature: 22,
                    month: `Oct`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 10,
                    tempInfo: `26°C`,
                    temperature: 26,
                    month: `Nov`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 11,
                    tempInfo: `30°C`,
                    temperature: 30,
                    month: `Dec`
                }),
            ];
            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 { IgxCategoryChartModule } from 'igniteui-angular-charts';

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

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core';
import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';
import { IgxCategoryChartComponent } from 'igniteui-angular-charts';

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("propertyEditor", { static: true } )
    private propertyEditor: IgxPropertyEditorPanelComponent
    @ViewChild("highlightingModeEditor", { static: true } )
    private highlightingModeEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxCategoryChartComponent
    private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
    public get temperatureAnnotatedData(): TemperatureAnnotatedData {
        if (this._temperatureAnnotatedData == null)
        {
            this._temperatureAnnotatedData = new TemperatureAnnotatedData();
        }
        return this._temperatureAnnotatedData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.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="HighlightingMode"
          name="HighlightingModeEditor"
          #highlightingModeEditor
          label="Highlighting Mode: "
          primitiveValue="BrightenSpecific">
          </igx-property-editor-property-description>
      </igx-property-editor-panel>
  </div>
  <div class="container fill">
      <igx-category-chart
      name="chart"
      #chart
      chartType="Column"
      computedPlotAreaMarginMode="Series"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      [dataSource]="temperatureAnnotatedData"
      highlightingMode="BrightenSpecific"
      toolTipType="None"
      crosshairsDisplayMode="None"
      isTransitionInEnabled="false">
      </igx-category-chart>
  </div>
</div>
html

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

以下の例は、highlightingBehavior Angular チャートを示しています。

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

    public index: number;
    public tempInfo: string;
    public temperature: number;
    public month: string;

}
export class TemperatureAnnotatedData extends Array<TemperatureAnnotatedDataItem> {
    public constructor(items: Array<TemperatureAnnotatedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new TemperatureAnnotatedDataItem(
                {
                    index: 0,
                    tempInfo: `27°C`,
                    temperature: 27,
                    month: `Jan`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 1,
                    tempInfo: `25°C`,
                    temperature: 25,
                    month: `Feb`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 2,
                    tempInfo: `21°C`,
                    temperature: 21,
                    month: `Mar`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 3,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Apr`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 4,
                    tempInfo: `16°C`,
                    temperature: 16,
                    month: `May`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 5,
                    tempInfo: `13°C`,
                    temperature: 13,
                    month: `Jun`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 6,
                    tempInfo: `14°C`,
                    temperature: 14,
                    month: `Jul`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 7,
                    tempInfo: `15°C`,
                    temperature: 15,
                    month: `Aug`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 8,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Sep`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 9,
                    tempInfo: `22°C`,
                    temperature: 22,
                    month: `Oct`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 10,
                    tempInfo: `26°C`,
                    temperature: 26,
                    month: `Nov`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 11,
                    tempInfo: `30°C`,
                    temperature: 30,
                    month: `Dec`
                }),
            ];
            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 { IgxCategoryChartModule } from 'igniteui-angular-charts';

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

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core';
import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';
import { IgxCategoryChartComponent } from 'igniteui-angular-charts';

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("propertyEditor", { static: true } )
    private propertyEditor: IgxPropertyEditorPanelComponent
    @ViewChild("highlightingBehaviorEditor", { static: true } )
    private highlightingBehaviorEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxCategoryChartComponent
    private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
    public get temperatureAnnotatedData(): TemperatureAnnotatedData {
        if (this._temperatureAnnotatedData == null)
        {
            this._temperatureAnnotatedData = new TemperatureAnnotatedData();
        }
        return this._temperatureAnnotatedData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.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="HighlightingBehavior"
          name="HighlightingBehaviorEditor"
          #highlightingBehaviorEditor
          label="Highlighting Behavior: "
          primitiveValue="DirectlyOver">
          </igx-property-editor-property-description>
      </igx-property-editor-panel>
  </div>
  <div class="container fill">
      <igx-category-chart
      name="chart"
      #chart
      chartType="Column"
      computedPlotAreaMarginMode="Series"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      [dataSource]="temperatureAnnotatedData"
      highlightingMode="Brighten"
      highlightingBehavior="DirectlyOver"
      toolTipType="None"
      crosshairsDisplayMode="None"
      isTransitionInEnabled="false">
      </igx-category-chart>
  </div>
</div>
html

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

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

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

以下の例は、凡例シリーズハイライト表示の Angular チャートを示しています。

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

    public franchise: string;
    public totalRevenue: number;
    public highestGrossing: number;

}
export class HighestGrossingMovies extends Array<HighestGrossingMoviesItem> {
    public constructor(items: Array<HighestGrossingMoviesItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new HighestGrossingMoviesItem(
                {
                    franchise: `Marvel Universe`,
                    totalRevenue: 22.55,
                    highestGrossing: 2.8
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Star Wars`,
                    totalRevenue: 10.32,
                    highestGrossing: 2.07
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Harry Potter`,
                    totalRevenue: 9.19,
                    highestGrossing: 1.34
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Avengers`,
                    totalRevenue: 7.76,
                    highestGrossing: 2.8
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Spider Man`,
                    totalRevenue: 7.22,
                    highestGrossing: 1.28
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `James Bond`,
                    totalRevenue: 7.12,
                    highestGrossing: 1.11
                }),
            ];
            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 } from 'igniteui-angular-charts';

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

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { IgxLegendComponent, 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("legend", { static: true } )
    private legend: IgxLegendComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxCategoryChartComponent
    private _highestGrossingMovies: HighestGrossingMovies = null;
    public get highestGrossingMovies(): HighestGrossingMovies {
        if (this._highestGrossingMovies == null)
        {
            this._highestGrossingMovies = new HighestGrossingMovies();
        }
        return this._highestGrossingMovies;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

ts

<div class="container vertical sample">
  <div class="legend-title">
      Highest Grossing Movie Franchises
  </div>
  <div class="legend">
      <igx-legend
      name="legend"
      #legend>
      </igx-legend>
  </div>
  <div class="container fill">
      <igx-category-chart
      name="chart"
      #chart
      [legend]="legend"
      chartType="Column"
      [dataSource]="highestGrossingMovies"
      xAxisInterval="1"
      yAxisTitle="Billions of U.S. Dollars"
      yAxisTitleLeftMargin="10"
      yAxisTitleRightMargin="5"
      yAxisLabelLeftMargin="0"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      highlightingMode="Brighten"
      legendHighlightingMode="MatchSeries"
      isTransitionInEnabled="false">
      </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 IgxCategoryChartComponent は、データ項目にカーソルを合わせると 3 種類のハイライト表示を有効にできます。

シリーズハイライトは、ポインターがデータポイント上ある場合に、マーカーまたは列で表される単一のデータポイントをハイライトします。これは、isSeriesHighlightingEnabled プロパティを true に設定することで有効になります。
項目ハイライトは、その位置に縞模様の図形を描画したりマーカーを描画したりすることでシリーズの項目をハイライト表示します。これは、isItemHighlightingEnabled プロパティを true に設定することで有効になります。
カテゴリハイライトはすべてのカテゴリ軸を対象にします。カーソル位置に最も近い軸領域を照らす図形を描画します。これは、isCategoryHighlightingEnabled プロパティを true に設定することで有効になります。

以下の例は、Angular チャートで使用できるさまざまなハイライト表示レイヤーを示しています。

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, IgxLegendModule } from "igniteui-angular-charts";


@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxCategoryChartModule,
    IgxLegendModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, AfterViewInit, ViewChild } from "@angular/core";
import { IgxCategoryChartComponent } from "igniteui-angular-charts";

@Component({
    standalone: false,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html"
})
export class AppComponent implements AfterViewInit {

    @ViewChild("chart", { static: true })
    public chart: IgxCategoryChartComponent;

    public isItemHighlightingEnabled: boolean = false;
    public isSeriesHighlightingEnabled: boolean = true;
    public isCategoryHighlightingEnabled: boolean = false;
    public highlightMode: string = "Auto";
    public highlightBehavior: string = "Auto";
    public legendHighlightMode: string = "Auto";
    public excludedProperties: any;

    public data = [
        { Month: "JAN", NewYork : 10.6, LosAngeles : 28.3 },
        { Month: "FEB", NewYork : 7.8,  LosAngeles : 31.1 },
        { Month: "MAR", NewYork : 12.2, LosAngeles : 27.8 },
        { Month: "APR", NewYork : 11.7, LosAngeles : 33.9 },
        { Month: "MAY", NewYork : 19.4, LosAngeles : 35.0 },
        { Month: "JUN", NewYork : 23.3, LosAngeles : 36.7 },
        { Month: "JUL", NewYork : 27.2, LosAngeles : 33.3 },
        { Month: "AUG", NewYork : 25.6, LosAngeles : 36.7 },
        { Month: "SEP", NewYork : 22.8, LosAngeles : 43.9 },
        { Month: "OCT", NewYork : 17.8, LosAngeles : 38.3 },
        { Month: "NOV", NewYork : 17.8, LosAngeles : 32.8 },
        { Month: "DEC", NewYork : 8.3,  LosAngeles : 28.9 }
    ];

    public OnEnableHighlightingChange = (e : any) => {

        const value = e.target.value;

        if(value=="Series"){
            this.isItemHighlightingEnabled = false;
            this.isSeriesHighlightingEnabled = true;
            this.isCategoryHighlightingEnabled = false;
        }
         else if(value == "Item") {
            this.isItemHighlightingEnabled = true;
            this.isSeriesHighlightingEnabled = false;
            this.isCategoryHighlightingEnabled = false;
        }
         else if(value == "Category") {
            this.isItemHighlightingEnabled = false;
            this.isSeriesHighlightingEnabled = false;
            this.isCategoryHighlightingEnabled = true;
        }
         else if(value=="None") {
            this.isItemHighlightingEnabled = false;
            this.isSeriesHighlightingEnabled = false;
            this.isCategoryHighlightingEnabled = false;
        }
    }

    public ngAfterViewInit(): void {
    }

    constructor() { }
}
ts

<div class="container vertical">
    <div class="options vertical">
        <div class="options horizontal">
        <span style="margin-left: 0.25rem;">Highlight Target:</span>
            <select (change)=OnEnableHighlightingChange($event) style="width: 7rem; margin-right: 1rem;">
                <option>Series</option>
                <option>Item</option>
                <option>Category</option>
                <option>None</option>
            </select>
            <span>Mode:</span>
                <select [(ngModel)]="highlightMode" style="width: 7rem; margin-right: 1rem;">
                    <option>Auto</option>
                    <option>BrightenSpecific</option>
                    <option>Brighten</option>
                    <option>FadeOthersSpecific</option>
                    <option>FadeOthers</option>
                    <option>None</option>
                </select>
            <span>Behavior:</span>
                <select [(ngModel)]="highlightBehavior" style="width: 7rem; margin-right: 1rem;">
                    <option>Auto</option>
                    <option>DirectlyOver</option>
                    <option>NearestItems</option>
                    <option>NearestItemsRetainMainShapes</option>
                    <option>NearestItemsAndSeries</option>
                </select>
            <span>Legend:</span>
                <select [(ngModel)]="legendHighlightMode" style="width: 7rem; margin-right: 1rem;">
                    <option>Auto</option>
                    <option>None</option>
                    <option>MatchSeries</option>
                </select>
            </div>
        <span id="legendTitle">Average Temperatures in the U.S. Cities</span>
        <div class="legend" >
            <igx-legend #legend orientation="Horizontal"></igx-legend>
        </div>

    </div>


    <div class="container">
        <igx-category-chart #chart height="100%" width="100%"
            [legend]="legend"
            [dataSource]="data"
            chartType="Column"
            [isCategoryHighlightingEnabled]="isCategoryHighlightingEnabled"
            [isItemHighlightingEnabled]="isItemHighlightingEnabled"
            [isSeriesHighlightingEnabled]="isSeriesHighlightingEnabled"
            [legendHighlightingMode]="legendHighlightMode"
            [highlightingMode]="highlightMode"
            [highlightingBehavior]="highlightBehavior"
            yAxisTitle="Temperatures in Celsius"
            yAxisMinimumValue="0"
            xAxisInterval="1">
        </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 メンバーのリストです。