Listas

El módulo de cartografía PowerPortalsPro ofrece gráficos interactivos y temáticos basados en Chart.js. Los gráficos se adaptan automáticamente al tema activo de la interfaz de usuario de Fluent (modo claro/oscuro, colores de acento), cargan datos directamente desde Dataverse mediante consultas agregadas de FetchXML y soportan eventos de clic que permiten a los usuarios profundizar en los datos subyacentes.

Tipos de cartas

Cada tipo de gráfico se representa mediante el FluentUIChart componente (o el DataverseChart envoltorio de conveniencia) con el Type parámetro establecido al valor de enum deseado ChartType .

  • Gráfico de barras — barras verticales para comparar categorías. Soporta modo apilado y multi-serie.
  • Gráfico de líneas — puntos conectados para las tendencias a lo largo del tiempo. Permite comparaciones año tras año.
  • Gráfico circular — cortes proporcionales de una sola medida entre categorías.
  • Gráfico de Donuts — igual que la tarta con un centro hueco para un aspecto más limpio.
  • Carta de radar — comparación multidimensional en una cuadrícula radial.
  • Carta de área polar — como la tarta, pero el radio de cada segmento es proporcional a su valor.
  • Gráfico de embudo — visualizar la reducción progresiva a través de etapas, estrechando de arriba hacia abajo.

Características principales

Todos los tipos de gráficos comparten un conjunto común de capacidades:

  • Consciente del tema — lee tokens de diseño de Fluent UI para texto, cuadrículas y colores de acento; Retematizar automáticamente cuando el usuario cambia el modo claro/oscuro.
  • Fuentes de datos de Dataverse — datos del gráfico de carga de Dataverse con una sola LoadAsync llamada. No se necesita FetchXML manual para escenarios comunes.
  • Consultas agregadas — Sum, CountColumn, Avg, Min, Max vía AggregateDataverseChartDataSource.
  • Haz clic en interactividad — OnElementClick dispara un ChartClickEventArgs con el índice del conjunto de datos, índice de datos, etiqueta, valor y el original IDataPoint para la coincidencia de patrones.
  • Agrupación de fechas — Día, Semana, Mes, Trimestre, Año y agrupaciones combinadas como MesAndAño o TrimestreAndAño.
  • Año tras año — SeriesDateGrouping divide la misma columna de fechas en varias series según un intervalo de tiempo diferente.
  • Agrupación de entidades enlazadas — agrupar o dividirse por una columna en una tabla relacionada mediante GroupByLinkedEntity / SeriesLinkedEntity con anidación ilimitada.
  • Filtrado basado en vistas — pasa ViewIds y DefaultViewId sigue DataverseChart mostrando un desplegable que permite a los usuarios cambiar entre vistas guardadas de Dataverse. Las condiciones de filtro de la vista seleccionada se fusionan automáticamente en la consulta agregada.
  • Gráficos apilados — Stacked="true" apila conjuntos de datos unos sobre otros.
  • Título y leyenda — Title para un encabezado por encima del gráfico; LegendPosition para arriba/abajo/izquierda/derecha/oculto.
  • Formato de valores — YAxisPrefix/YAxisSuffix y XAxisPrefix/XAxisSuffix para moneda, porcentajes y etiquetas personalizadas.
  • Exporta como imagen — descarga el gráfico como PNG con un solo clic.
  • Botón de actualizar — recarga datos de Dataverse sin salir de la página.
  • Borde temático — borde redondeado opcional usando fichas de diseño Fluent mediante ShowBorder.

Fuentes de datos

Tres clases de fuente de datos cubren el espectro desde control total hasta configuración cero:

  • DataverseChartDataSource — acepta FetchXML en bruto con mapeos explícitos de columnas. Máxima flexibilidad para consultas complejas.
  • AggregateDataverseChartDataSource — conjunta propiedades como TableName, GroupByColumn, AggregateColumn, y Aggregate. La fuente de datos construye automáticamente el FetchXML.
  • ViewDataverseChartDataSource — resuelve FetchXML desde una vista guardada de Dataverse. Establecer LabelColumn y ValueColumn para indicar qué columnas se asignan a etiquetas y valores.

Empezando

La forma más rápida de añadir una tabla es el DataverseChart componente de conveniencia con un AggregateDataverseChartDataSource. Consulta la demostración del Gráfico de barras para una guía completa, o la Referencia de la API para la documentación de cada clase y propiedad.