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 comportamientoselectionMode por defecto está desactivado y requiere optar por una de las siguientes opciones. Hay varios modos de selección disponibles en el{ComponentName}:
- Auto
- Ninguno
- Brighten
- DesvanecerOtros
- Escala de grisesOtros
- FocusColorThickOutline
- FocusColorOutline
- SelectionColorThickOutline
- SelectionColorOutline
- FocusColorFill
- SelectionColorFill
- Contorno grueso
Brightendesvanece el elemento seleccionado mientrasFadeOthers que ocurrirá el efecto contrario.GrayscaleOthers se comportará de forma similar peroFadeOthers en cambio mostrará un color gris al resto de la serie. Ten en cuenta que esto anulará cualquierselectionBrush configuración.SelectionColorOutline ySelectionColorThickOutline dibujará un borde alrededor de la serie.
En conjunto, aselectionBehavior está disponible para proporcionar un mayor control sobre qué elementos se seleccionan. El comportamiento por defecto en Auto esPerSeriesAndDataItemMultiSelect.
- Auto
- PerDataItemMultiSelect
- PerDataItemSingleSelect
- PerSeriesAndDataItemMultiSelect
- PerSeriesAndDataItemSingleSelect
- PerSeriesAndDataItemGlobalSingleSelect
- PerSeriesMultiSelect
- PerSeriesSingleSelect
Configuring Selection via Color Fill
El siguiente ejemplo muestra la combinación de ambosSelectionColorFill yAuto el comportamiento de selección, también conocidoPerSeriesAndDataItemMultiSelect como Los rellenos de color proporcionan una pista visual útil ya que cambian el color de fondo de todo el objeto de la serie. Al hacer clic en cada objeto verás que el objeto cambia de verde a morado.
Configuring Multiple Selection
Otros modos de selección ofrecen varios métodos de selección. Por ejemplo, usarselectionBehavior conPerDataItemMultiSelect afectará todas las series de toda la categoría cuando hay varias series presentes, permitiendo la selección entre categorías. En comparación,PerDataItemSingleSelect solo se puede seleccionar una única categoría de elementos a la vez. Esto es útil si varias series están vinculadas a diferentes fuentes de datos y proporciona un mayor control sobre 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
CuandofocusBrush se aplica, la serie seleccionada aparecerá con un borde cuando laselectionMode propiedad esté configurada en una de las opciones de enfoque.
Radial Series Selection
Este ejemplo demuestra otro tipo de serie mediante elIgcDataChartComponent que cada serie radial puede seleccionarse con diferentes colores.
Programmatic Selection
La selección de gráficos también puede configurarse en código, donde se pueden ver elementos seleccionados en el gráfico al iniciar o en tiempo de ejecución. Esto se puede lograr añadiendo elementos a laSelectedSeriesCollection parte de laIgcCategoryChartComponent comunidad. LaMatcher propiedad delIgcChartSelection objeto permite seleccionar una serie basada en un "emparejador", ideal cuando no tienes acceso a la serie real desde la carta. Si conoces las propiedades que contiene tu fuente de datos, puedes usar queValueMemberPath sería la serie.
El emparejador es ideal para usarlo en gráficos, como cuandoIgcCategoryChartComponent no tienes acceso a la serie real, como elIgcDataChartComponent. En este caso, si conoces las propiedades que contenía tu fuente de datos, puedes suponer los ValueMemberPaths que tendría la serie. Por ejemplo, si tu fuente de datos tiene propiedades numéricas nuclear, carbón, petróleo, solar, entonces sabes que se crean series para cada una de estas propiedades. Si quieres resaltar la serie vinculada a valores solares, puedes añadir un objeto ChartSelection a laselectedSeriesItems colección usando un emparejador 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 |
|---|---|