Ejemplo de resaltado de gráfico de Web Components
En el ejemplo siguiente se muestran las diferentes opciones de resaltado que están disponibles en el gráfico Web Components.
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 { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule,
IgcCategoryChartModule
);
export class Sample {
private propertyEditor: IgcPropertyEditorPanelComponent
private highlightingModeEditor: IgcPropertyEditorPropertyDescriptionComponent
private highlightingBehaviorEditor: IgcPropertyEditorPropertyDescriptionComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
var highlightingModeEditor = this.highlightingModeEditor = document.getElementById('HighlightingModeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var highlightingBehaviorEditor = this.highlightingBehaviorEditor = document.getElementById('HighlightingBehaviorEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
propertyEditor.componentRenderer = this.renderer;
propertyEditor.target = this.chart;
chart.dataSource = this.temperatureAnnotatedData;
}
this._bind();
}
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;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options vertical">
<igc-property-editor-panel
name="PropertyEditor"
id="PropertyEditor"
description-type="CategoryChart"
is-horizontal="true"
is-wrapping-enabled="true">
<igc-property-editor-property-description
property-path="HighlightingMode"
name="HighlightingModeEditor"
id="HighlightingModeEditor"
label="Highlighting Mode: "
primitive-value="FadeOthersSpecific">
</igc-property-editor-property-description>
<igc-property-editor-property-description
property-path="HighlightingBehavior"
name="HighlightingBehaviorEditor"
id="HighlightingBehaviorEditor"
label="Highlighting Behavior: "
primitive-value="NearestItemsAndSeries">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="legend-title">
Average Temperature in Sydney
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="Column"
computed-plot-area-margin-mode="Series"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
highlighting-mode="FadeOthersSpecific"
highlighting-behavior="NearestItemsAndSeries"
y-axis-maximum-value="35"
y-axis-label-location="OutsideRight"
tool-tip-type="None"
is-transition-in-enabled="false">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Web Components Modo y comportamientos de resaltado de gráficos
Todos los gráficos Web Components 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 IgcCategoryChartComponent
controles , IgcFinancialChartComponent
, y IgcDataChartComponent
tienen la misma API para usar la característica de resaltado.
En el ejemplo siguiente se muestra el highlightingMode
gráfico Web Components.
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 { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule,
IgcCategoryChartModule
);
export class Sample {
private propertyEditor: IgcPropertyEditorPanelComponent
private highlightingModeEditor: IgcPropertyEditorPropertyDescriptionComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
var highlightingModeEditor = this.highlightingModeEditor = document.getElementById('HighlightingModeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
propertyEditor.componentRenderer = this.renderer;
propertyEditor.target = this.chart;
chart.dataSource = this.temperatureAnnotatedData;
}
this._bind();
}
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;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options vertical">
<igc-property-editor-panel
name="PropertyEditor"
id="PropertyEditor"
description-type="CategoryChart"
is-horizontal="true"
is-wrapping-enabled="true">
<igc-property-editor-property-description
property-path="HighlightingMode"
name="HighlightingModeEditor"
id="HighlightingModeEditor"
label="Highlighting Mode: "
primitive-value="BrightenSpecific">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="Column"
computed-plot-area-margin-mode="Series"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
highlighting-mode="BrightenSpecific"
tool-tip-type="None"
crosshairs-display-mode="None"
is-transition-in-enabled="false">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
En el ejemplo siguiente se muestra el highlightingBehavior
gráfico Web Components.
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 { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule,
IgcCategoryChartModule
);
export class Sample {
private propertyEditor: IgcPropertyEditorPanelComponent
private highlightingBehaviorEditor: IgcPropertyEditorPropertyDescriptionComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
var highlightingBehaviorEditor = this.highlightingBehaviorEditor = document.getElementById('HighlightingBehaviorEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
propertyEditor.componentRenderer = this.renderer;
propertyEditor.target = this.chart;
chart.dataSource = this.temperatureAnnotatedData;
}
this._bind();
}
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;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options vertical">
<igc-property-editor-panel
name="PropertyEditor"
id="PropertyEditor"
description-type="CategoryChart"
is-horizontal="true"
is-wrapping-enabled="true">
<igc-property-editor-property-description
property-path="HighlightingBehavior"
name="HighlightingBehaviorEditor"
id="HighlightingBehaviorEditor"
label="Highlighting Behavior: "
primitive-value="DirectlyOver">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="Column"
computed-plot-area-margin-mode="Series"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
highlighting-mode="Brighten"
highlighting-behavior="DirectlyOver"
tool-tip-type="None"
crosshairs-display-mode="None"
is-transition-in-enabled="false">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Web Components Resaltado de la leyenda del gráfico
Todos los gráficos de Web Components 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 IgcCategoryChartComponent
controles , IgcFinancialChartComponent
, y IgcDataChartComponent
tienen la misma API para usar la característica de resaltado.
En el ejemplo siguiente se muestra la serie de leyendas que resalta Web Components gráfico.
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 { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.legend = this.legend;
chart.dataSource = this.highestGrossingMovies;
}
this._bind();
}
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Highest Grossing Movie Franchises
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="Column"
x-axis-interval="1"
y-axis-title="Billions of U.S. Dollars"
y-axis-title-left-margin="10"
y-axis-title-right-margin="5"
y-axis-label-left-margin="0"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
highlighting-mode="Brighten"
legend-highlighting-mode="MatchSeries"
is-transition-in-enabled="false">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Resaltar capas
El Ignite UI for Web Components IgcCategoryChartComponent
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.
En el ejemplo siguiente se muestran las diferentes capas de resaltado que están disponibles en el gráfico Web Components.
import { SeriesHighlightingBehavior, LegendHighlightingMode, SeriesHighlightingMode, IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(IgcCategoryChartModule, IgcLegendModule);
export class CategoryChartHighlighting {
private chart: IgcCategoryChartComponent;
private legend: IgcLegendComponent
public data: any[] = [];
constructor() {
this.onHighlightingTargetChanged = this.onHighlightingTargetChanged.bind(this);
this.onHighlightingModeChanged = this.onHighlightingModeChanged.bind(this);
this.onBehaviorModeChanged = this.onBehaviorModeChanged.bind(this);
this.onLegendHighlightingModeChanged = this.onLegendHighlightingModeChanged.bind(this);
this.initData();
this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this.chart.dataSource = this.data;
this.legend = document.getElementById('Legend') as IgcLegendComponent;
this.chart.legend = this.legend
this.chart.isItemHighlightingEnabled = false;
this.chart.isSeriesHighlightingEnabled = true;
this.chart.isCategoryHighlightingEnabled = false;
this.chart.highlightingMode = SeriesHighlightingMode.Auto;
this.chart.highlightingBehavior = SeriesHighlightingBehavior.Auto;
this.chart.legendHighlightingMode = LegendHighlightingMode.Auto;
const highlightingTarget1 = document.getElementById('highlightingTarget') as HTMLSelectElement;
highlightingTarget1!.addEventListener('change', this.onHighlightingTargetChanged);
const highlightingMode = document.getElementById("highlightingMode") as HTMLSelectElement;
highlightingMode!.addEventListener("change", this.onHighlightingModeChanged);
const behaviorMode = document.getElementById("behaviorMode") as HTMLSelectElement;
behaviorMode!.addEventListener("change", this.onBehaviorModeChanged);
const legendHighlightingMode = document.getElementById("legendHighlightingMode") as HTMLSelectElement;
legendHighlightingMode!.addEventListener("change", this.onLegendHighlightingModeChanged);
}
public onHighlightingTargetChanged = (e: any) => {
let value = e.target.value as String;
if(value == "Series"){
this.chart.isItemHighlightingEnabled = false;
this.chart.isSeriesHighlightingEnabled = true;
this.chart.isCategoryHighlightingEnabled = false;
}
else if(value == "Item") {
this.chart.isItemHighlightingEnabled = true;
this.chart.isSeriesHighlightingEnabled = false;
this.chart.isCategoryHighlightingEnabled = false;
}
else if(value == "Category") {
this.chart.isItemHighlightingEnabled = false;
this.chart.isSeriesHighlightingEnabled = false;
this.chart.isCategoryHighlightingEnabled = true;
}
else if(value=="None") {
this.chart.isItemHighlightingEnabled = false;
this.chart.isSeriesHighlightingEnabled = false;
this.chart.isCategoryHighlightingEnabled = false;
}
}
public onHighlightingModeChanged(e: any) {
this.chart.highlightingMode = e.target.value as SeriesHighlightingMode;
}
public onBehaviorModeChanged(e: any) {
this.chart.highlightingBehavior = e.target.value as SeriesHighlightingBehavior;
}
public onLegendHighlightingModeChanged(e: any) {
this.chart.legendHighlightingMode = e.target.value as LegendHighlightingMode;
}
public initData() {
const CityTemperatureData: any = [
{ 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},
];
this.data = [ CityTemperatureData];
}
}
new CategoryChartHighlighting();
ts<!DOCTYPE html>
<html>
<head>
<title>CategoryChartColumnChartWithHighlighting</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options horizontal">
<label class="options-label">Highlight Target: </label>
<select id="highlightingTarget">
<option>Series</option>
<option>Item</option>
<option>Category</option>
<option>None</option>
</select>
<span class="options-label">Mode:</span>
<select id="highlightingMode">
<option>Auto</option>
<option>Brighten</option>
<option>BrightenSpecific</option>
<option>FadeOthers</option>
<option>FadeOthersSpecific</option>
<option>None</option>
</select>
<span class="options-label">Behavior:</span>
<select id="behaviorMode">
<option>Auto</option>
<option>DirectlyOver</option>
<option>NearestItems</option>
<option>NearestItemsAndSeries</option>
<option>NearestItemsRetainMainShapes</option>
</select>
<span class="options-label">Legend:</span>
<select id="legendHighlightingMode">
<option>Auto</option>
<option>MatchSeries</option>
<option>None</option>
</select>
</div>
<div class="options vertical">
<span class="legend-title">
Average Temperatures in the U.S. Cities
</span>
<div class="legend">
<igc-legend
orientation="Horizontal"
name="Legend"
id ="Legend">
</igc-legend>
</div>
</div>
<igc-category-chart id="chart" style="height: calc(100% - 3rem)"
width="100%"
height="100%"
x-axis-interval="1"
y-axis-minimum-value="0"
y-axis-title="Temperatures in Celsius"
is-series-highlighting-enabled="true"
is-category-highlighting-enabled="true"
is-item-highlighting-enabled="true">
</igc-category-chart>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
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: