La función de selección de Ignite UI for React en React {ComponentTitle} permite a los usuarios seleccionar, resaltar, delinear y, viceversa, deseleccionar de forma interactiva una o varias series dentro de un gráfico. Esto ofrece muchas posibilidades diferentes en cuanto a cómo los usuarios interactúan con los datos presentados de formas 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
TSX
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
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import { IgrCategoryChartModule, IgrDataChartInteractivityModule } from"@infragistics/igniteui-react-charts";
import { IgrCategoryChart } from"@infragistics/igniteui-react-charts";
import { TemperatureAverageDataItem, TemperatureAverageData } from'./TemperatureAverageData';
constmods: any[] = [
IgrCategoryChartModule,
IgrDataChartInteractivityModule
];
mods.forEach((m) => m.register());
exportdefaultclass Sample extendsReact.Component<any, any> {
private chart: IgrCategoryChart
private chartRef(r: IgrCategoryChart) {
this.chart = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.chartRef = this.chartRef.bind(this);
}
publicrender(): JSX.Element {
return (
<divclassName="container sample"><divclassName="legend-title">
Average Temperature Range in New York
</div><divclassName="container fill"><IgrCategoryChartref={this.chartRef}chartType="Column"dataSource={this.temperatureAverageData}yAxisTitle="Temperature in Degrees Celsius"yAxisTitleLeftMargin="10"yAxisTitleRightMargin="5"yAxisLabelLeftMargin="0"isHorizontalZoomEnabled="false"isVerticalZoomEnabled="false"crosshairsDisplayMode="None"toolTipType="None"selectionMode="SelectionColorFill"selectionBehavior="Auto"selectionBrush="purple"focusBrush="purple"></IgrCategoryChart></div></div>
);
}
private _temperatureAverageData: TemperatureAverageData = null;
publicget temperatureAverageData(): TemperatureAverageData {
if (this._temperatureAverageData == null)
{
this._temperatureAverageData = new TemperatureAverageData();
}
returnthis._temperatureAverageData;
}
}
// rendering above component in the React DOMconstroot = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus 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.
/* 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 IgrDataChart donde cada serie radial se puede seleccionar con diferentes colores.
EXAMPLE
DATA
TSX
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
/* 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 IgrCategoryChart. La Matcher propiedad del IgrChartSelection 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 IgrCategoryChart no tiene acceso a la serie real, como el IgrDataChart. 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: