Web Components Selección de gráficos
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.
Configuring Selection
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
Configuring Selection via Color Fill
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.
Configuring Multiple Selection
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.
Configuring Outline Selection
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.
Radial Series Selection
Este ejemplo muestra otro tipo de serie a través de la IgcDataChartComponent donde cada serie radial se puede seleccionar con diferentes colores.
Programmatic Selection
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.
API References
La siguiente es una lista de miembros de API mencionados en las secciones anteriores:
IgcCategoryChartComponent Properties |
IgcDataChartComponent Properties |
|---|---|