La función de selección de Ignite UI for Web Components en Web Components {ComponentTitle} permite a los usuarios seleccionar, resaltar, delinear y viceversa de forma interactiva anular la selección de una o varias series dentro de un gráfico. Esto proporciona muchas posibilidades diferentes con la forma en que los usuarios interactúan con los datos presentados de maneras más significativas.
Configurar la selección
El comportamiento selectionMode predeterminado está desactivado y requiere optar por una de las siguientes opciones. Hay varios modos de selección disponibles en: {ComponentName}
Auto
Ninguno
Brighten
DesvanecerOtros
Escala de grisesOtros
FocusColorThickOutline
FocusColorOutline
SelectionColorThickOutline
SelectionColorOutline
FocusColorFill
SelectionColorFill
Contorno grueso
Brighten desvanecerá el elemento seleccionado mientras FadeOthers que hará que ocurra el efecto contrario. GrayscaleOthers se comportará de manera similar, FadeOthers pero en su lugar mostrará un color gris al resto de la serie. Tenga en cuenta que esto anulará cualquier selectionBrush configuración. SelectionColorOutline y SelectionColorThickOutline trazará un borde alrededor de la serie.
En conjunto, a está disponible para proporcionar un selectionBehavior mayor control sobre qué elementos se seleccionan. El comportamiento predeterminado de Auto es PerSeriesAndDataItemMultiSelect.
Auto
PerDataItemMultiSelect
PerDataItemSingleSelect
PerSeriesAndDataItemMultiSelect
PerSeriesAndDataItemSingleSelect
PerSeriesAndDataItemGlobalSingleSelect
PerSeriesMultiSelect
PerSeriesSingleSelect
Configuración de la selección a través del relleno de color
En el siguiente ejemplo se muestra la combinación de ambos SelectionColorFill y Auto el comportamiento de selección, también conocido como PerSeriesAndDataItemMultiSelect. Los rellenos de color proporcionan una señal visual útil, ya que cambian el color de fondo de todo el elemento de la serie. Al hacer clic en cada elemento, verá que el artículo cambia de verde a morado.
EXAMPLE
DATA
TS
HTML
CSS
exportclassTemperatureAverageDataItem{
publicconstructor(init: Partial<TemperatureAverageDataItem>) {
Object.assign(this, init);
}
public month: string;
public temperature: number;
}
exportclassTemperatureAverageDataextendsArray<TemperatureAverageDataItem> {
publicconstructor(items: Array<TemperatureAverageDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new TemperatureAverageDataItem(
{
month: `Jan`,
temperature: 3
}),
new TemperatureAverageDataItem(
{
month: `Feb`,
temperature: 4
}),
new TemperatureAverageDataItem(
{
month: `Mar`,
temperature: 9
}),
new TemperatureAverageDataItem(
{
month: `Apr`,
temperature: 15
}),
new TemperatureAverageDataItem(
{
month: `May`,
temperature: 21
}),
new TemperatureAverageDataItem(
{
month: `Jun`,
temperature: 26
}),
new TemperatureAverageDataItem(
{
month: `Jul`,
temperature: 29
}),
new TemperatureAverageDataItem(
{
month: `Aug`,
temperature: 28
}),
new TemperatureAverageDataItem(
{
month: `Sep`,
temperature: 24
}),
new TemperatureAverageDataItem(
{
month: `Oct`,
temperature: 18
}),
new TemperatureAverageDataItem(
{
month: `Nov`,
temperature: 11
}),
new TemperatureAverageDataItem(
{
month: `Dec`,
temperature: 5
}),
];
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">
Average Temperature Range in New York
</div><divclass="container fill"><igc-category-chartname="chart"id="chart"chart-type="Column"y-axis-title="Temperature in Degrees Celsius"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-display-mode="None"tool-tip-type="None"selection-mode="SelectionColorFill"selection-behavior="Auto"selection-brush="purple"focus-brush="purple"></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.
Configuración de la selección múltiple
Otros modos de selección ofrecen varios métodos de selección. Por ejemplo, el uso selectionBehavior de con PerDataItemMultiSelect afectará a todas las series de toda la categoría cuando haya varias series presentes, al tiempo que permitirá la selección entre categorías. En comparación con PerDataItemSingleSelect, solo se puede seleccionar una sola categoría de artículos a la vez. Esto es útil si varias series están enlazadas a diferentes fuentes de datos y proporciona un mayor control de la selección entre categorías. PerSeriesAndDataItemGlobalSingleSelect Permite la selección de una sola serie en todas las categorías a la vez.
<!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="options vertical"><igc-property-editor-panelname="PropertyEditor"id="PropertyEditor"description-type="CategoryChart"is-horizontal="true"is-wrapping-enabled="true"><igc-property-editor-property-descriptionproperty-path="SelectionMode"name="SelectionModeEditor"id="SelectionModeEditor"label="Selection Mode: "primitive-value="SelectionColorFill"></igc-property-editor-property-description><igc-property-editor-property-descriptionproperty-path="SelectionBehavior"name="SelectionBehaviorEditor"id="SelectionBehaviorEditor"label="Selection Behavior: "primitive-value="PerSeriesAndDataItemGlobalSingleSelect"></igc-property-editor-property-description></igc-property-editor-panel></div><divclass="legend-title">
Highest Grossing Movie Franchises
</div><divclass="legend"><igc-legendname="legend"id="legend"orientation="Horizontal"></igc-legend></div><divclass="container fill"><igc-category-chartname="chart"id="chart"chart-type="Column"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-display-mode="None"selection-mode="SelectionColorFill"selection-behavior="PerSeriesAndDataItemGlobalSingleSelect"selection-brush="orange"focus-brush="orange"></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
Configuración de la selección de contorno
Cuando focusBrush se aplica, las series seleccionadas aparecerán con un borde cuando la selectionMode propiedad se establezca en una de las opciones de foco.
Selección de series radiales
Este ejemplo muestra otro tipo de serie a través de la IgcDataChartComponent donde cada serie radial se puede seleccionar con diferentes colores.
EXAMPLE
DATA
TS
HTML
CSS
exportclassFootballPlayerStatsItem{
publicconstructor(init: Partial<FootballPlayerStatsItem>) {
Object.assign(this, init);
}
public attribute: string;
public ronaldo: number;
public messi: number;
}
exportclassFootballPlayerStatsextendsArray<FootballPlayerStatsItem> {
publicconstructor(items: Array<FootballPlayerStatsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new FootballPlayerStatsItem(
{
attribute: `Dribbling`,
ronaldo: 8,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Passing`,
ronaldo: 8,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Finishing`,
ronaldo: 10,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Free Kicks`,
ronaldo: 8,
messi: 9
}),
new FootballPlayerStatsItem(
{
attribute: `Penalties`,
ronaldo: 9,
messi: 7
}),
new FootballPlayerStatsItem(
{
attribute: `Physical`,
ronaldo: 10,
messi: 7
}),
new FootballPlayerStatsItem(
{
attribute: `Team Play`,
ronaldo: 7,
messi: 9
}),
new FootballPlayerStatsItem(
{
attribute: `Heading`,
ronaldo: 9,
messi: 6
}),
];
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">
Ronaldo vs Messi Player Stats
</div><divclass="legend"><igc-legendname="legend"id="legend"orientation="Horizontal"></igc-legend></div><divclass="container fill"><igc-data-chartname="chart"id="chart"is-horizontal-zoom-enabled="false"is-vertical-zoom-enabled="false"selection-mode="SelectionColorFill"selection-behavior="PerSeriesMultiSelect"><igc-category-angle-axisname="angleAxis"id="angleAxis"label="attribute"></igc-category-angle-axis><igc-numeric-radius-axisname="radiusAxis"id="radiusAxis"inner-radius-extent-scale="0.1"interval="2"minimum-value="0"maximum-value="10"></igc-numeric-radius-axis><igc-radial-column-seriesname="RadialColumnSeries1"id="RadialColumnSeries1"value-member-path="ronaldo"show-default-tooltip="false"area-fill-opacity="0.8"thickness="3"title="Ronaldo"selection-brush="yellow"></igc-radial-column-series><igc-radial-column-seriesname="RadialColumnSeries2"id="RadialColumnSeries2"value-member-path="messi"show-default-tooltip="false"area-fill-opacity="0.8"thickness="3"title="Messi"selection-brush="cyan"></igc-radial-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
Selección programática
La selección de gráficos también se puede configurar en un código en el que los elementos seleccionados en el gráfico se pueden ver al inicio o en tiempo de ejecución. Esto se puede lograr agregando elementos a la propiedad de la SelectedSeriesCollection IgcCategoryChartComponent. La Matcher propiedad del IgcChartSelection objeto permite seleccionar una serie basada en un "matcher", ideal cuando no se tiene acceso a la serie real desde el gráfico. Si conoce las propiedades que contiene la fuente de datos, puede usar las ValueMemberPath que sería la serie.
El comparador es ideal para usar en gráficos, como cuando IgcCategoryChartComponent no tiene acceso a la serie real, como el IgcDataChartComponent. En este caso, si conoce las propiedades que contenía el origen de datos, puede suponer los ValueMemberPaths que tendría la serie. Por ejemplo, si la fuente de datos tiene propiedades numéricas Nuclear, Carbón, Petróleo, Solar, Sabrá que se han creado series para cada una de estas propiedades. Si desea resaltar la serie enlazada a valores solares, puede agregar un objeto ChartSelection a la selectedSeriesItems colección mediante un comparador con las siguientes propiedades establecidas
Por ejemplo, si su fuente de datos tiene propiedades numéricas Nuclear, Carbón, Petróleo, Solar, entonces sabe que hay series creadas para cada una de estas propiedades. Si desea seleccionar la serie enlazada a los valores solares, puede agregar un objeto ChartSelection a la colección SelectedSeriesItems mediante un comparador con las siguientes propiedades establecidas.
Referencias de API
La siguiente es una lista de miembros de API mencionados en las secciones anteriores: