Gráfico de barras
Renderiza un gráfico de barras configurando Type="bar" el FluentUIChart componente. Pasar una lista de etiquetas de categoría y uno o más ChartDataset objetos para definir las barras. FluentUIChart es un envoltorio consciente del tema alrededor del componente subyacente Chart , que se construye sobre Chart.js.
Ejemplo de datos estáticos
Un gráfico de barras con tres conjuntos de datos sin colorear — los colores se rellenan desde la paleta activa de Fluent. Haz clic en cualquier barra para ver la carga útil del evento de clic, y cambia el tema del sitio entre Luz y Oscuridad para ver cómo el gráfico se re-temaza.
Conciencia del tema
Chart.js se renderiza a un HTML <canvas>, por lo que el CSS no puede acceder a barras, etiquetas de ejes o líneas de cuadrícula — son píxeles rasterizados. FluentUIChart Soluciona esto leyendo las propiedades personalizadas resueltas del CSS en tiempo de renderizado y enviando los valores a las opciones de Chart.js como color, scale.ticks.color, y scale.grid.color. Se suscribe y ThemeService.ThemeChanged vuelve a aplicar la paleta cada vez que cambia el tema.
Colores automáticos de conjuntos de datos
Los conjuntos de datos que salen BackgroundColor o BorderColor nulos se rellenan automáticamente a partir de una paleta de series derivada de Fluent que comienza con el color de acento actual. Los conjuntos de datos que proporcionan colores explícitos se pasan sin cambios.
Manejo de clics de elementos
Suscríbete para OnElementClick recibir una notificación cuando el usuario haga clic en una barra (o en cualquier elemento renderizado). La callback recibe un ChartClickEventArgs con el índice del conjunto de datos, índice de datos, etiqueta, valor, etiqueta del conjunto de datos y la instancia original IDataPoint . Subclase DataPoint para adjuntar el contexto definido por el llamador (id de registro, región, categoría, etc.) y hacer coincidencia de patrones con tu subclase en el handler de clics para recuperarla. Se ignoran los clics en el fondo del gráfico.
Título de la lista
Configura Title para mostrar un encabezado encima del gráfico. El título está representado por Chart.js dentro del lienzo y utiliza el color del texto del tema actual.
Listas apiladas
Configura Stacked="true" para apilar conjuntos de datos unos sobre otros en lugar de uno al lado del otro. Esto es útil para gráficos de barras y líneas con múltiples series donde el total en todas las series es significativo (por ejemplo, ingresos totales = ganado + perdido).
Posición de leyenda
Configura LegendPosition para controlar dónde aparece la leyenda: "top" (por defecto), "bottom", "left", "right", o "hidden" para ocultarla por completo.
AggregateDataverseChartDataSource
Úsalo AggregateDataverseChartDataSource para alimentar un gráfico de Dataverse sin escribir FetchXML en bruto. Establece TableName, GroupByColumn, AggregateColumn, y Aggregate. Opcionalmente, añade un SeriesColumn para multi-series, un GroupByDateGrouping para bucketing de fechas, un ViewId para fusionar las condiciones de filtro de una vista guardada, o un FilterXml fragmento para condiciones en línea.
Ejemplo de Dataverse
Ingresos estimados por oportunidades por año, divididos por estado (Ganados vs Perdidos) y apilados — cargados desde Dataverse vía AggregateDataverseChartDataSource. Haz clic en una barra para ver el año, el estado y los ingresos.
Filtrado basado en vistas
Pasa ViewIds y DefaultViewId sigue DataverseChart mostrando un desplegable selector de vistas sobre el gráfico. Cuando el usuario cambia de vista, las condiciones de filtro de la vista seleccionada se fusionan en la consulta agregada y el gráfico se recarga. El ViewId on no se establece directamente — DataverseChart lo gestiona. La vista determina qué registros se incluyen; La configuración agregada determina cómo se agrupan y resumen.
Ejemplo con filtro de vista
Ingresos estimados por mes con un desplegable selector de vistas. Cambia entre vistas para ver cómo se recarga el gráfico con diferentes criterios de filtro.
Agrupación de Entidades Enlazadas
Establece GroupByLinkedEntity (o SeriesLinkedEntity) para agrupar o dividir por una columna en una tabla relacionada. El constructor crea una <link-entity> unión y coloca el groupby atributo dentro de ella. Soporta anidamiento ilimitado para ChartLinkedEntity.LinkedEntity uniones multi-hop.
La configuración anterior genera el siguiente FetchXML:
Ejemplo de entidad enlazada
Ingresos totales estimados por oportunidades agrupados por la industria de la cuenta matriz — la industrycode columna sigue sobre la account mesa, unida a través de customerid.
Véase también