Eine Zahlenspalte bildet normalerweise einen Balken für jeden Wert, den sie hält – ein Altersdiagramm mit einem Balken für 23, einem weiteren für 24 und so weiter. In Bereiche gruppiert, bildet sie stattdessen einen Balken für jede Spaltenspanne: 20 – 24, 25 – 29, 30 – 34. Setzen GroupByRangeSize Sie (groupByRangeSize in React) für die Balken oder SeriesRangeSize (seriesRangeSize), um jeden Balken in einen Datensatz für jeden Bereich aufzuteilen. Es handelt sich um dieselbe Gruppierung, aus der die Zeilen eines Rasters stammen RangeSize, also bilden ein Diagramm und ein Raster daneben eine Spalte gleichermaßen.
Dataverse gruppiert ein Aggregat nach einem Wert, niemals nach einem Wertebereich, sodass das Diagramm für jeden Wert – oder jedes Wertepaar, wenn eine Reihe sie aufteilt – nach einer Zeile fragt, und der Server die Zeilen in ihre Bereiche addiert, bevor das Diagramm sie zeichnet. Ein Bereich beginnt mit einem Vielfachen seiner Größe: Bei einer Größe von 5 liegt 23 in 20–24.
20 – 24Eine Spalte mit Dezimalzahlen oder einer Größe mit ihnen liest sich vom Anfang bis unter das Ende, 1.0 to under 1.5, mit so vielen Dezimalstellen, wie die Spalte beibehält. Setzen GroupByFormat Sie oder SeriesFormat um die Enden in einem eigenen Format anzuzeigen, wie zum Beispiel N1.Setzen GroupByRangeSize Sie auf ein AggregateDataverseChartDataSource auf die Größe jedes Bereichs. Die Balken kommen in der Reihenfolge ihrer Bereiche zurück, am niedrigsten zuerst, wobei die Leiste der Schallplatten, die keinen Wert haben, sie anführt.
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="Kontakte nach Alter"
/>
);
}<DataverseChart Source="_source"
Type="ChartType.Bar"
Title="Kontakte nach Alter" />
@code {
private readonly AggregateDataverseChartDataSource _source = new()
{
TableName = "contact",
GroupByColumn = "ppp_age",
GroupByRangeSize = 5, // 0 – 4, 5 – 9, 10 – 14 …
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
};
}Die Kontakte wurden nach Alter gezählt. Wähle, wie viele Jahre jeder Balken abdeckt, oder einen Balken für jedes Alter. Jede Auswahl erstellt eine neue Datenquelle, und das Diagramm lädt erneut, weil die Quelle nach etwas anderem fragt.
Wenn die Spalte SeriesRangeSize in den Bereichen die Reihe und nicht die Balken ist: Das Diagramm gruppiert seine Balken nach GroupByColumn und teilt jede in einen Datensatz für jeden Bereich von SeriesColumnauf. Gestapelt zeigt jeder Balken, wie sich sein Gesamtwert über die Bereiche verteilt. Beide können gleichzeitig in Bereichen liegen – Alter entlang der Achse, Gehaltsspannen in jedem Balken.
const source = useMemo(
() =>
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'gendercode',
seriesColumn: 'ppp_age',
seriesRangeSize: 20, // Ein Datensatz für 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, // Ein Datensatz für 0 – 19, 20 – 39, 40 – 59 ...
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
};
}Die Kontakte wurden nach Geschlecht gezählt, jeder Balken nach Altersgruppe gestapelt. Wähle aus, wie viele Jahre jeder Bereich abdeckt; die Legende listet die Bereiche auf, zuerst die niedrigsten.
Datensätze ohne Wert in der Spalte sind ein eigener Balken, beschriftet (Blank) – oder in einer Serie ein (Blank) Datensatz. Das gilt für jede Gruppierung, nicht nur für Bereiche. Setzen GroupByIncludeBlank Sie sie auf SeriesIncludeBlank false oder lassen Sie sie aus dem Diagramm heraus.
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'ppp_age',
groupByRangeSize: 10,
groupByIncludeBlank: false, // Kein (Leere) Balken
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
});_source = new AggregateDataverseChartDataSource
{
TableName = "contact",
GroupByColumn = "ppp_age",
GroupByRangeSize = 10,
GroupByIncludeBlank = false, // Kein (Leere) Balken
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
};Ein Diagramm, das ein ViewDataSource mit einem Raster teilt, gruppiert die Bereiche auf die gleiche Weise: Gesetzt RangeSize auf seine Aggregation GroupBy (oder Series). Das Klicken auf eine Leiste markiert dann jede Zeile des Rasters, deren Wert im Bereich dieser Leiste liegt, und das Klicken auf die (Blank) Leiste markiert die Zeilen ohne Wert.
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,
},
],
});Ein Diagramm in Bereichen liest bis zu 10.000 Wertezeilen – unterschiedliche Werte oder Wertepaare, wenn eine Reihe sie aufteilt. Eines mit mehr zeigt einen Fehler, der dies angibt, statt eines unvollständigen Diagramms. Stellen Sie im Start des Hosts so ein, RangeGroupingOptions.MaximumRangedValues dass dieses Limit für jedes Raster und jedes Diagramm im Portal geändert wird. Ein Diagramm kann mit (maximumRangedValues) eine eigene MaximumRangedValues untere Grenze verlangen; eine, die mehr verlangt als die des Portals, wird an die des Portals gebunden.
// Diese Tabelle zeigt weniger
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'ppp_age',
groupByRangeSize: 5,
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
maximumRangedValues: 2000,
});// Program.cs — Jedes Raster und jedes Diagramm im Portal
builder.Services.Configure<RangeGroupingOptions>(o => o.MaximumRangedValues = 20_000);
// Diese Tabelle zeigt weniger
_source = new AggregateDataverseChartDataSource
{
TableName = "contact",
GroupByColumn = "ppp_age",
GroupByRangeSize = 5,
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
MaximumRangedValues = 2_000,
};Dataverse gibt höchstens 5.000 Zeilen an eine Abfrage zurück, sodass nach 4.999 Zeilen jeweils 5.000 Zeilen gelesen werden. Das Anheben des Limits hat folgende Kosten für jedes Raster oder Diagramm, dessen Spalte so viele Werte hat:
SplitOverRecordLimitaufteilen, was die Anfragen erneut multipliziert.Eine Spalte mit so vielen Werten ist oft besser in größere Bereiche gruppiert, die dieselben Zeilen liest, aber weniger Balken zeichnet, oder zuerst gefiltert, was weniger Zeilen liest.
Siehe auch