Gráfico de barras

Renderize um gráfico de barras configurando Type="bar" o FluentUIChart componente. Passe uma lista de etiquetas de categorias e um ou mais ChartDataset objetos para definir as barras. FluentUIChart é um wrapper consciente do tema ao redor do componente subjacente Chart , que é construído sobre Chart.js.

Consciência do Tema

Chart.js renderiza para um HTML <canvas>, então o CSS não pode alcançar barras, rótulos de eixo ou linhas de grade — são pixels rasterizados. FluentUIChart Contorna isso lendo as propriedades personalizadas resolvidas do CSS em tempo de renderização e inserindo os valores nas opções de Chart.js como color, scale.ticks.color, e scale.grid.color. Ele assina ThemeService.ThemeChanged e reaplica a paleta sempre que o tema muda.

Cores Automáticas do Conjunto de Dados

Conjuntos de dados que saem BackgroundColor ou BorderColor são nulos são preenchidos automaticamente a partir de uma paleta de séries derivada do Fluent, começando pela cor de destaque atual. Conjuntos de dados que fornecem cores explícitas são passados inalterados.

Tratamento de Cliques de Elementos

Inscreva-se OnElementClick para ser notificado quando o usuário clicar em uma barra (ou qualquer elemento renderizado). O callback recebe um ChartClickEventArgs com o índice do conjunto de dados, índice de dados, etiqueta, valor, rótulo do conjunto de dados e a instância original IDataPoint . Subclasse DataPoint para anexar contexto definido pelo chamador (id de registro, região, categoria, etc.) e fazer pattern-match com sua subclasse no handler de clique para recuperá-la. Cliques no fundo do gráfico são ignorados.

Título da parada

Configure Title para exibir um cabeçalho acima do gráfico. O título é renderizado por Chart.js dentro da tela e usa a cor do texto do tema atual.

Gráficos Empilhados

Configurado Stacked="true" para empilhar conjuntos de dados uns sobre os outros em vez de lado a lado. Isso é útil para gráficos de barras e linhas com múltiplas séries, onde o total de todas as séries é significativo (por exemplo, receita total = ganho + derrotado).

Posição de Lenda

Defina LegendPosition para controlar onde a legenda aparece: "top" (padrão), "bottom", "left", "right", ou "hidden" para ocultá-la completamente.

AggregateDataverseChartDataSource

Uso AggregateDataverseChartDataSource para alimentar um gráfico do Dataverse sem escrever FetchXML bruto. Defina TableName, GroupByColumn, AggregateColumn, e Aggregate. Opcionalmente, adicione um SeriesColumn para multi-série, um GroupByDateGrouping para bucketing de data, um ViewId para mesclar as condições de filtro de uma visualização salva, ou um FilterXml fragmento para condições inline.

Filtragem baseada em visualização

Passe ViewIds e DefaultViewId siga DataverseChart para exibir um menu suspenso do seletor de visualização acima do gráfico. Quando o usuário troca de vista, as condições de filtro da vista selecionada são mescladas na consulta agregada e o gráfico é recarregado. O ViewId na fonte não é definido diretamente — DataverseChart ele gerencia. A visualização determina quais registros estão incluídos; A configuração agregada determina como eles são agrupados e resumidos.

Agrupamento de Entidades Vinculadas

Defina GroupByLinkedEntity (ou SeriesLinkedEntity) para agrupar ou se dividir por uma coluna em uma tabela relacionada. O construtor cria uma <link-entity> junção e coloca o groupby atributo dentro dela. Suporta aninhamento ilimitado via ChartLinkedEntity.LinkedEntity para joins multi-hop.

A configuração acima gera o seguinte FetchXML:

Veja também

Chart API Reference — documentação completa para todas as classes de gráficos, enums e fontes de dados.