60 以上のリアルタイム Angular チャート を使用して、何百万ものデータ ポイントを描画し、視覚化を構築します。これは、あらゆるアプリケーション シナリオに対応する最も広範なチャート ライブラリです。
Angular Chart Highlighting Example
다음 예는 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));
}
}
}
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 { IgxCategoryChartModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxPropertyEditorPanelModule,
IgxCategoryChartModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { 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
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
Angular 차트 강조 모드 및 동작
모든 Angular Chart는 다양한 강조 표시 옵션을 지원합니다. highlightingMode
플롯 영역에 렌더링된 시리즈/데이터 항목 위로 마우스를 가져갈 때 밝아지거나 희미해지도록 설정할 수 있습니다. highlightingBehavior
강조 표시 효과를 트리거하기 위해 바로 위 또는 가장 가까운 데이터 항목으로 설정할 수 있습니다. 강조 표시 모드와 동작은 IgxCategoryChartComponent
, IgxFinancialChartComponent
및 IgxDataChartComponent
컨트롤에서 지원되며 강조 표시 기능을 사용하기 위한 동일한 API를 가지고 있습니다.
다음 예제는 Angular 차트의 highlightingMode
보여줍니다.
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));
}
}
}
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 { IgxCategoryChartModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxPropertyEditorPanelModule,
IgxCategoryChartModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { 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));
}
}
}
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 { IgxCategoryChartModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxPropertyEditorPanelModule,
IgxCategoryChartModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { 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 Chart는 범례 강조 표시를 지원합니다. 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));
}
}
}
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 { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxCategoryChartModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { 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
Highlight Layers
Ignite UI for Angular IgxCategoryChartComponent
데이터 항목 위에 마우스를 올리면 세 가지 유형의 강조 표시를 활성화할 수 있습니다.
계열 강조 표시는 포인터가 마커나 열 위에 있을 때 표시되는 단일 데이터 포인트를 강조 표시합니다. 이는
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 {}
tsimport { 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
Additional Resources
다음 항목에서 관련 차트 기능에 대한 자세한 내용을 확인할 수 있습니다.
API References
다음은 위 섹션에서 언급된 API 멤버 목록입니다.
highlightingMode
highlightingBehavior
LegendHighlightingBehavior
isCategoryHighlightingEnabled
isItemHighlightingEnabled
isSeriesHighlightingEnabled
IgxCategoryChartComponent
IgxDataChartComponent
IgxFinancialChartComponent