Une colonne numérique forme généralement une barre pour chaque valeur qu’elle contient — un tableau d’âge avec une barre pour 23, une autre pour 24, et ainsi de suite. Regroupé en plages, il produit une barre pour chaque portée de la colonne : 20 – 24, 25 – 29, 30 – 34. Définissez GroupByRangeSize (groupByRangeSize dans React) pour les barres, ou SeriesRangeSize (seriesRangeSize) pour diviser chaque barre en un jeu de données pour chaque plage. C’est le même regroupement que les lignes d’une grille obtiennent de RangeSize, donc un graphique et une grille à côté regroupent une colonne de la même façon.
Dataverse regroupe un agrégat par une valeur, jamais par une plage de valeurs, donc le graphique demande une ligne pour chaque valeur — ou chaque paire de valeurs, lorsqu’une série les sépare — et le serveur additionne les lignes dans leurs plages avant que le graphique ne les dessine. Une plage commence à un multiple de sa taille : avec une taille de 5, 23 se divise en 20 – 24.
20 – 24. Une colonne avec des décimales, ou une taille avec celles-ci, se lit du début à la fin, 1.0 to under 1.5, avec autant de décimales que la colonne en conserve. Placez GroupByFormat ou SeriesFormat pour afficher les extrémités dans un format qui vous est propre, tel que N1.Fixez GroupByRangeSize sur an AggregateDataverseChartDataSource à la taille de chaque plage. Les barres reviennent dans l’ordre de leur plage, la plus basse en premier, avec la barre des disques sans valeur en tête.
import {
AggregateDataverseChartDataSource,
AggregateType,
ChartType,
} from '@powerportalspro/react-charts';
import { DataverseChart } from '@powerportalspro/react-fluent';
import { useMemo } from 'react';
export function MyChart() {
const source = useMemo(
() =>
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'ppp_age',
groupByRangeSize: 5, // 0 – 4, 5 – 9, 10 – 14 …
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
}),
[],
);
return (
<DataverseChart
dataSource={source}
type={ChartType.Bar}
title="Contacts par âge"
/>
);
}<DataverseChart Source="_source"
Type="ChartType.Bar"
Title="Contacts par âge" />
@code {
private readonly AggregateDataverseChartDataSource _source = new()
{
TableName = "contact",
GroupByColumn = "ppp_age",
GroupByRangeSize = 5, // 0 – 4, 5 – 9, 10 – 14 …
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
};
}Les contacts comptabilisés par âge. Choisissez le nombre d’années couvert par chaque barre, ou une barre pour chaque âge. Chaque choix construit une nouvelle source de données, et le graphique se charge à nouveau car sa source demande autre chose.
Définissez SeriesRangeSize lorsque la colonne dans les plages est la série plutôt que les barres : le graphique regroupe ses barres par GroupByColumn et divise chacune en un jeu de données pour chaque plage de SeriesColumn. Empilée, chaque barre montre comment son total se divise entre les plages. Les deux peuvent être dans des plages en même temps — l’âge selon l’axe, les fourchettes de salaire empilées dans chaque barre.
const source = useMemo(
() =>
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'gendercode',
seriesColumn: 'ppp_age',
seriesRangeSize: 20, // un jeu de données pour 0 – 19, 20 – 39, 40 – 59 ...
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
}),
[],
);
return <DataverseChart dataSource={source} type={ChartType.Bar} stacked />;<DataverseChart Source="_source"
Type="ChartType.Bar"
Stacked="true" />
@code {
private readonly AggregateDataverseChartDataSource _source = new()
{
TableName = "contact",
GroupByColumn = "gendercode",
SeriesColumn = "ppp_age",
SeriesRangeSize = 20, // un jeu de données pour 0 – 19, 20 – 39, 40 – 59 ...
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
};
}Les contacts comptabilisés par sexe, chaque barre empilée par tranche d’âge. Choisissez le nombre d’années couvert par chaque plage ; la légende liste les plages, les plus bas en premier.
Les enregistrements sans valeur dans la colonne sont une barre à part entière, étiquetée (Blank) — ou dans une série, un (Blank) jeu de données. Cela s’applique à tout groupement, pas seulement aux plages. Définissez GroupByIncludeBlank ou SeriesIncludeBlank à false pour les exclure du tableau.
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'ppp_age',
groupByRangeSize: 10,
groupByIncludeBlank: false, // pas de barre (Vide)
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
});_source = new AggregateDataverseChartDataSource
{
TableName = "contact",
GroupByColumn = "ppp_age",
GroupByRangeSize = 10,
GroupByIncludeBlank = false, // pas de barre (Vide)
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
};Un graphique qui partage a ViewDataSource avec une grille regroupe les plages de la même manière : défini RangeSize sur ses agrégations GroupBy (ou Series). Cliquer sur une barre met alors en surbrille chaque ligne de la grille dont la valeur se trouve dans l’intervalle de cette barre, et cliquer sur la (Blank) barre met en évidence les lignes sans valeur.
const dataSource = useViewDataSource({
viewId,
aggregations: [
{
groupBy: { column: 'ppp_age', rangeSize: 10 },
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
},
],
});_dataSource = new ViewDataSource(GridService, new ViewDataSourceOptions
{
ViewId = _viewId,
Aggregations =
[
new ChartAggregation
{
GroupBy = new ChartGrouping { Column = "ppp_age", RangeSize = 10 },
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
},
],
});Un graphique dans les plages affiche jusqu’à 10 000 lignes de valeurs — des valeurs distinctes, ou des paires de valeurs lorsqu’une série les sépare. Un graphique avec plus de valeurs affiche une erreur indiquant cela plutôt qu’un graphique incomplet. Configurez RangeGroupingOptions.MaximumRangedValues dans le démarrage de l’hôte pour modifier cette limite pour chaque grille et graphique dans le portail. Un graphique peut demander une limite inférieure avec MaximumRangedValues (maximumRangedValues) ; celle qui demande plus que celle du portail est tenue à celle du portail.
// Ce graphique indique moins
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'ppp_age',
groupByRangeSize: 5,
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
maximumRangedValues: 2000,
});// Program.cs — Chaque grille et tableau du portail
builder.Services.Configure<RangeGroupingOptions>(o => o.MaximumRangedValues = 20_000);
// Ce graphique indique moins
_source = new AggregateDataverseChartDataSource
{
TableName = "contact",
GroupByColumn = "ppp_age",
GroupByRangeSize = 5,
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
MaximumRangedValues = 2_000,
};Dataverse renvoie au maximum 5 000 lignes par requête, donc après 4 999 les valeurs sont lues 5 000 à la fois. Augmenter la limite comporte ces coûts pour chaque grille ou graphique dont la colonne contient autant de valeurs :
SplitOverRecordLimit, ce qui multiplie à nouveau les requêtes.Une colonne avec autant de valeurs est souvent mieux regroupée dans des plages plus grandes, qui lit les mêmes lignes mais en dessine moins de barres, ou filtrée en premier, qui lit moins de lignes.
Voir aussi