En Ignite UI for Web Components, es una versión altamente personalizable de la IgcLegendComponent, que muestra los valores de las series y proporciona muchas propiedades de configuración para filtrar las filas de las series y las columnas de valores, el estilo y el IgcDataLegendComponent formato de los valores. Esta leyenda se actualiza al mover el ratón dentro del área de la trama de la IgcCategoryChartComponent, IgcFinancialChartComponent, y IgcDataChartComponent. Además, tiene un estado persistente que recuerda el último punto en el que se mantiene el puntero del ratón del usuario fuera del área de trazado. Muestra este contenido mediante un conjunto de tres tipos de filas (encabezado, serie, resumen) y cuatro tipos de columnas (título, etiqueta, valor, unidad).
Web Components filas de leyenda de datos
Las filas de IgcDataLegendComponent incluyen la fila de encabezado, las filas de la serie y la fila de resumen. La fila del encabezado muestra la etiqueta del eje del punto sobre el que se desplaza y se puede cambiar usando la propiedad headerText.
EXAMPLE
DATA
TS
HTML
CSS
exportclassHighestGrossingMoviesItem{
publicconstructor(init: Partial<HighestGrossingMoviesItem>) {
Object.assign(this, init);
}
public franchise: string;
public totalRevenue: number;
public highestGrossing: number;
}
exportclassHighestGrossingMoviesextendsArray<HighestGrossingMoviesItem> {
publicconstructor(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
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="legend-title">
Highest Grossing Movie Franchises
</div><divclass="legend"><igc-data-legendname="legend"id="legend"units-text="B"></igc-data-legend></div><divclass="container fill"><igc-category-chartname="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"crosshairs-snap-to-data="true"></igc-category-chart></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="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.
Fila de encabezado
La fila del encabezado muestra la etiqueta actual del eje x al pasar el mouse sobre series de categorías y series financieras. Puede usar las propiedades headerFormatDate y headerFormatTime para formatear la fecha y la hora en IgcDataLegendComponent si el eje x muestra fechas. Para otros tipos de series, IgcDataLegendComponent no representa la fila del encabezado.
Fila de serie
La fila de la serie representa cada serie trazada en el gráfico. Estas filas mostrarán la insignia de leyenda, el título de la serie, el valor real/abreviado de la serie y el símbolo de abreviatura o unidad de medida, si se especifica. Puede filtrar filas de series configurando las propiedades de includedSeries o excludedSeries en una colección de índices de series (1, 2, 3) o títulos de series (Tesla, Microsoft).
Fila de resumen
Finalmente, hay una fila de resumen que muestra el total de todos los valores de la serie. El título del resumen predeterminado se puede cambiar utilizando la propiedad summaryTitleText de la leyenda. Además, puede utilizar la propiedad summaryType para personalizar si muestra los valores Total, Min, Max o Average de la serie en la fila de resumen.
Web Components Columnas de leyenda de datos
Las columnas de IgcDataLegendComponent incluyen el título de la serie, la etiqueta, el valor de la columna de datos y la unidad opcional asociada con el valor. Algunas series del gráfico pueden tener varias columnas para etiqueta, valor y unidades. Por ejemplo, las series de precios financieros tienen columnas de datos High, Low, Open y Close que se pueden filtrar en IgcDataLegendComponent utilizando las propiedades includedColumns o excludedColumns.
EXAMPLE
DATA
TS
HTML
CSS
//begin async dataexportclassMultipleStocksextendsArray<Array<StockItem>> {
publicstaticasync fetch(): Promise<MultipleStocks> {
const dataSources: any[] = [
//await this.getAmazonStock(),awaitthis.getGoogleStock(),
awaitthis.getAmazonStock(),
//await this.getTeslaStock()
];
returnnewPromise<MultipleStocks>((resolve, reject) => {
resolve(dataSources);
});
}
/** gets Amazon stock OHLC prices from a .JSON file */publicstaticasync getAmazonStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Amazon"]
};
// console.log("fetchAmazonStock: ", stockData.length);returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Tesla stock OHLC prices from a .JSON file */publicstaticasync getTeslaStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Tesla"]
};
returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Microsoft stock OHLC prices from a .JSON file */publicstaticasync getMicrosoftStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Microsoft"]
};
returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Google stock OHLC prices from a .JSON file */publicstaticasync getGoogleStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Google"]
};
returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
publicstatic convertData(jsonData: any[]): StockItem[] {
let stockItems: StockItem[] = [];
for (let json of jsonData) {
let parts = json.date.split("-"); // "2020-01-01"let item = new StockItem();
item.date = newDate(parts[0], parts[1], parts[2]);
item.open = json.open;
item.high = json.high;
item.low = json.low;
item.close = json.close;
item.volume = json.volume;
stockItems.push(item);
}
return stockItems;
}
}
exportclassStockItem{
public open?: number;
public close?: number;
public high?: number;
public low?: number;
public volume?: number;
public date?: Date;
}
//end async datats
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="legend"><igc-data-legendname="legend"id="legend"included-columns="Open, Close, High, Low, Change"></igc-data-legend></div><divclass="container fill"><igc-financial-chartname="chart"id="chart"chart-type="Candle"is-vertical-zoom-enabled="true"is-horizontal-zoom-enabled="true"data-tool-tip-header-format-time="None"zoom-slider-type="None"></igc-financial-chart></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
La configuración de valores en las propiedades includedColumns y excludedColumns depende del tipo de serie y de cuántas columnas de datos admiten. Por ejemplo, puede establecer la propiedad includedColumns en una colección de cadenas de apertura y cierre y la leyenda mostrará solo los valores de apertura y cierre de los precios de las acciones cuando el gráfico represente series financieras. La siguiente tabla enumera todos los nombres de columnas que se pueden usar para filtrar columnas en la leyenda de datos.
Donde el precio típico y el cambio porcentual de los precios de OHLC se calculan automáticamente por series financieras, por lo que no es necesario incluirlos en sus fuentes de datos.
Columna de título
La columna de título muestra insignias de leyenda y títulos de series, que provienen de la propiedad title de los diferentes IgcSeriesComponent trazados en el gráfico.
Columna de etiqueta
La columna de etiqueta muestra un nombre corto en el lado izquierdo de la columna de valor, por ejemplo, "O" para el precio de las acciones abiertas. Puede alternar la visibilidad de esta columna utilizando la propiedad labelDisplayMode.
Columna de valor
La columna de valores muestra los valores de las series como texto abreviado que se puede formatear usando la propiedad valueFormatAbbreviation para aplicar la misma abreviatura para todos los números estableciendo esta propiedad en Shared. Alternativamente, un usuario puede seleccionar otras abreviaturas como Independent, Kilo, Million, etc. La precisión de los valores abreviados se controla utilizando valueFormatMinFractions y valueFormatMaxFractions para los dígitos mínimo y máximo, respectivamente.
Columna de unidad
La columna de unidades muestra un símbolo de abreviatura en el lado derecho de la columna de valores. El símbolo de la unidad depende de la propiedad valueFormatAbbreviation, por ejemplo, "M" para la abreviatura Million.
Personalización de columnas
Puede personalizar el texto que se muestra en las columnas Etiqueta y Unidad usando propiedades que terminan en MemberAsLegendLabel y MemberAsLegendUnit en cada serie. La siguiente tabla muestra algunas posibles personalizaciones de las columnas Etiqueta y Unidad.
Además, puede utilizar la propiedad UnitText en IgcDataLegendComponent para cambiar el texto que se muestra en todas las columnas de Unidad.
Web Components Estilo de leyenda de datos
IgcDataLegendComponent proporciona propiedades para diseñar cada tipo de columna. Cada una de estas propiedades comienza con Título, Etiqueta, Valor o Unidades. Puede diseñar el color, la fuente y el margen del texto. Por ejemplo, si desea establecer el color del texto de todas las columnas, debe establecer las propiedades titleTextColor, labelTextColor, valueTextColor y unitsTextColor. El siguiente ejemplo demuestra una utilización de las propiedades de estilo mencionadas anteriormente:
EXAMPLE
Web Components Formato de valor de leyenda de datos
IgcDataLegendComponent proporciona abreviatura automática de números grandes utilizando su propiedad valueFormatAbbreviation. Esto agrega un multiplicador en la columna de unidades, como kilo, millón, mil millones, etc. Puede personalizar la cantidad de dígitos fraccionarios que se muestran configurando valueFormatMinFractions y valueFormatMaxFractions. Esto le permitirá determinar el número mínimo y máximo de dígitos que aparecen después del punto decimal, respectivamente. El siguiente ejemplo demuestra cómo utilizar esas propiedades:
EXAMPLE
DATA
TS
HTML
CSS
exportclassHighestGrossingMoviesItem{
publicconstructor(init: Partial<HighestGrossingMoviesItem>) {
Object.assign(this, init);
}
public franchise: string;
public totalRevenue: number;
public highestGrossing: number;
}
exportclassHighestGrossingMoviesextendsArray<HighestGrossingMoviesItem> {
publicconstructor(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
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="legend-title">
Highest Grossing Movie Franchises
</div><divclass="legend"><igc-data-legendname="legend"id="legend"value-format-mode="Decimal"value-format-min-fractions="1"units-text="B"></igc-data-legend></div><divclass="container fill"><igc-category-chartname="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"tool-tip-type="None"crosshairs-display-mode="None"is-category-highlighting-enabled="true"></igc-category-chart></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Web Components Modo de valor de leyenda de datos
Tiene la posibilidad de cambiar la visualización decimal predeterminada de los valores dentro de IgcDataLegendComponent a una moneda cambiando la propiedad valueFormatMode. Además, puede cambiar la cultura del símbolo de moneda mostrado configurando la propiedad valueFormatCulture como una etiqueta cultural. Por ejemplo, la siguiente leyenda de datos de ejemplo con valueFormatCulture establecido en "en-GB" para mostrar el símbolo de libras esterlinas (£):
EXAMPLE
DATA
TS
HTML
CSS
//begin async dataexportclassMultipleStocksextendsArray<Array<StockItem>> {
publicstaticasync fetch(): Promise<MultipleStocks> {
const dataSources: any[] = [
//await this.getAmazonStock(),awaitthis.getGoogleStock(),
awaitthis.getAmazonStock(),
//await this.getTeslaStock()
];
returnnewPromise<MultipleStocks>((resolve, reject) => {
resolve(dataSources);
});
}
/** gets Amazon stock OHLC prices from a .JSON file */publicstaticasync getAmazonStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Amazon"]
};
// console.log("fetchAmazonStock: ", stockData.length);returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Tesla stock OHLC prices from a .JSON file */publicstaticasync getTeslaStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Tesla"]
};
returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Microsoft stock OHLC prices from a .JSON file */publicstaticasync getMicrosoftStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Microsoft"]
};
returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Google stock OHLC prices from a .JSON file */publicstaticasync getGoogleStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Google"]
};
returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
publicstatic convertData(jsonData: any[]): StockItem[] {
let stockItems: StockItem[] = [];
for (let json of jsonData) {
let parts = json.date.split("-"); // "2020-01-01"let item = new StockItem();
item.date = newDate(parts[0], parts[1], parts[2]);
item.open = json.open;
item.high = json.high;
item.low = json.low;
item.close = json.close;
item.volume = json.volume;
stockItems.push(item);
}
return stockItems;
}
}
exportclassStockItem{
public open?: number;
public close?: number;
public high?: number;
public low?: number;
public volume?: number;
public date?: Date;
}
//end async datats
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="legend"><igc-data-legendname="legend"id="legend"included-columns="Close, Change, Value"excluded-columns="High, Low, Open, Volume"label-display-mode="Hidden"value-format-mode="Currency"value-format-culture="en-GB"></igc-data-legend></div><divclass="container fill"><igc-financial-chartname="chart"id="chart"chart-type="Candle"data-tool-tip-value-format-mode="Currency"data-tool-tip-value-format-culture="en-GB"data-tool-tip-label-display-mode="Hidden"data-tool-tip-included-columns="Close, Change, Value"data-tool-tip-header-format-time="None"zoom-slider-type="None"></igc-financial-chart></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Web Components Agrupación de leyendas de datos
dataLegendGroup se puede establecer, en todos los tipos de series, en una cadena que categorizará un grupo de series en Data Legend. Cada grupo tendrá su propia fila de resumen antes de que se muestre otro grupo de series: De forma predeterminada, DataLegend ocultará los nombres de los grupos, pero puede mostrar los nombres de los grupos estableciendo la groupRowVisible propiedad en true.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="legend"><igc-data-legendname="legend"id="legend"group-row-visible="true"></igc-data-legend></div><divclass="container fill"><igc-data-chartname="chart"id="chart"><igc-category-x-axisname="xAxis"id="xAxis"label="year"></igc-category-x-axis><igc-numeric-y-axisname="yAxis"id="yAxis"></igc-numeric-y-axis><igc-column-seriesname="ColumnSeries1"id="ColumnSeries1"title="America"value-member-path="america"data-legend-group="Medals by Country"></igc-column-series><igc-column-seriesname="ColumnSeries2"id="ColumnSeries2"title="China"value-member-path="china"data-legend-group="Medals by Country"></igc-column-series><igc-column-seriesname="ColumnSeries3"id="ColumnSeries3"title="Russia"value-member-path="russia"data-legend-group="Medals by Country"></igc-column-series></igc-data-chart></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Web Components Estilo y eventos de leyenda de datos
Se exponen varias propiedades, incluida la agrupación de partes de la leyenda.
Tiene IgcDataLegendComponent varios eventos que se activan al representar su fila correspondiente, incluso durante las interacciones del mouse donde los valores se están actualizando. Estos eventos se enumeran a continuación con una descripción de para qué están diseñados para ser utilizados:
StyleGroupRow: Este evento se activa para cada grupo para aplicar estilo al texto que se muestra en las filas del grupo.
StyleHeaderRow: Este evento se activa al representar la fila de encabezado.
StyleSeriesRow: este evento se activa una vez para cada fila de la serie, lo que permite aplicar un estilo condicional a los valores de la serie.
StyleSeriesColumn: este evento se activa una vez para cada columna de la serie, lo que permite aplicar estilos condicionales a las diferentes columnas de la serie en el gráfico.
StyleSummaryRow: este evento se activa una vez al representar la fila de resumen.
StyleSummaryColumn: este evento se activa una vez al representar la columna de resumen.
Algunos de los eventos exponen un IgcDataLegendStylingRowEventArgs parámetro como sus argumentos, lo que le permite personalizar el texto de cada elemento, el color del texto y la visibilidad general de la fila. Los argumentos del evento también exponen propiedades específicas del evento. Por ejemplo, dado que el StyleSeriesRow evento se desencadena para cada serie, los argumentos del evento devolverán el índice de la serie y el título de la serie para la fila que representa la serie.
StyleSummaryColumn y SeriesStyleColumn exponen un IgcDataLegendStylingColumnEventArgs parámetro como sus argumentos, para personalizar cada campo de la serie. Los argumentos de evento también exponen propiedades específicas del evento, como el índice de columna y las propiedades relacionadas con los miembros de valor sobre las columnas.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="legend"><igc-data-legendname="legend"id="legend"group-row-visible="true"group-text-color="purple"group-text-style="Italic bold 20px Arial"></igc-data-legend></div><divclass="container fill"><igc-data-chartshould-auto-expand-margin-for-initial-labels="true"computed-plot-area-margin-mode="Series"name="chart"id="chart"highlighted-values-display-mode="Overlay"><igc-category-x-axisname="xAxis"id="xAxis"label="year"></igc-category-x-axis><igc-numeric-y-axisname="yAxis"id="yAxis"></igc-numeric-y-axis><igc-column-seriesname="ColumnSeries1"id="ColumnSeries1"title=""value-member-path="total"data-legend-group="Total Medals"highlighted-values-data-legend-group="Country"highlighted-value-member-path="america"highlighted-title-suffix="America"></igc-column-series><igc-data-tool-tip-layername="dataToolTipLayer"id="dataToolTipLayer"group-row-visible="true"grouping-mode="Grouped"></igc-data-tool-tip-layer></igc-data-chart></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css