60 以上のリアルタイム Angular チャート を使用して、何百万ものデータ ポイントを描画し、視覚化を構築します。これは、あらゆるアプリケーション シナリオに対応する最も広範なチャート ライブラリです。
Ejemplo de resaltado de gráfico de Angular
El siguiente ejemplo demuestra las diferentes opciones de resaltado que están disponibles en el gráfico 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
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Angular Modo y comportamientos de resaltado de gráficos
Todos los gráficos Angular admiten una variedad de opciones de resaltado. highlightingMode
Se puede configurar para que se ilumine o se desvanezca cuando el ratón se desplaza sobre una serie/elemento de datos renderizado en el área de trazado. highlightingBehavior
Se puede establecer directamente sobre o en el elemento de datos más cercano para activar el efecto de resaltado. Los modos y comportamientos de resaltado son compatibles con los IgxCategoryChartComponent
controles , IgxFinancialChartComponent
, y IgxDataChartComponent
tienen la misma API para usar la característica de resaltado.
El siguiente ejemplo demuestra el highlightingMode
del gráfico 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("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
El siguiente ejemplo demuestra el highlightingBehavior
del gráfico 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 Resaltado de la leyenda del gráfico
Todos los gráficos de Angular admiten el resaltado de leyendas. legendHighlightingMode
puede habilitado para que cuando el mouse esté pasando el mouse sobre un elemento de marcador de leyenda, la serie renderizada se resalte en el área de trazado. El resaltado de leyendas es compatible con los IgxCategoryChartComponent
controles , IgxFinancialChartComponent
, y IgxDataChartComponent
tienen la misma API para usar la característica de resaltado.
El siguiente ejemplo demuestra la serie de leyendas resaltando el gráfico 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
Resaltar capas
El Ignite UI for Angular IgxCategoryChartComponent
puede habilitar tres tipos de resaltado al pasar el cursor sobre los elementos de datos.
El resaltado de series resaltará el único punto de datos representado por un marcador o columna cuando el puntero se coloque sobre él. Esto se habilita estableciendo la propiedad
isSeriesHighlightingEnabled
en verdadero.El resaltado de elementos resalta los elementos de una serie, ya sea dibujando una forma de banda en su posición o representando un marcador en su posición. Esto se habilita estableciendo la propiedad
isItemHighlightingEnabled
en verdadero.El resaltado de categorías apunta a todos los ejes de categorías del gráfico. Dibujan una forma que ilumina el área del eje más cercana a la posición del puntero. Esto se habilita estableciendo la propiedad
isCategoryHighlightingEnabled
en verdadero.
El siguiente ejemplo demuestra las diferentes capas de resaltado que están disponibles en el gráfico 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
Recursos adicionales
Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:
Referencias de API
La siguiente es una lista de miembros de API mencionados en las secciones anteriores:
highlightingMode
highlightingBehavior
LegendHighlightingBehavior
isCategoryHighlightingEnabled
isItemHighlightingEnabled
isSeriesHighlightingEnabled
IgxCategoryChartComponent
IgxDataChartComponent
IgxFinancialChartComponent