数字列は通常、保持する値ごとにバーを表示します。年齢チャートで23のバー、24のバー、という具合です。レンジごとにグループ化すると、列の各スパンごとにバーが作られます:20 – 24、25 – 29、30 – 34。バーには GroupByRangeSize (ReactではgroupByRangeSize )、または各バーを各範囲ごとにデータセットに分割するには SeriesRangeSize (seriesRangeSize)を設定します。これはグリッドの行が RangeSizeから得られるのと同じグループ構成なので、チャートとその横のグリッドが同じように列をグループ化します。
Dataverseは集計を値でグループ化し、値の範囲でグループ化することはありません。したがってチャートは各値に対して行を求めます。または連続数が値のペアを分割した場合は、各行を割り当て、サーバーはグラフが描画する前に行を合計して範囲に加算します。範囲はそのサイズの倍数から始まります。サイズ5の場合、23は20から24に及ぶ位置です。
20 – 24)までラベル付けされます。小数点を含む列、または小数点付きサイズは、列が保持する小数点数の小数点で、開始から末尾まで読み 1.0 to under 1.5します。 GroupByFormat または SeriesFormat を設定して、 N1などの独自の形式で末尾を表示します。AggregateDataverseChartDataSourceの各範囲のGroupByRangeSizeを割り当てます。バーはそれぞれの範囲の順番に戻ってきて、最も小さい方が先に、値のないレコードのバーが先頭に出ます。
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="年齢別の連絡先"
/>
);
}<DataverseChart Source="_source"
Type="ChartType.Bar"
Title="年齢別の連絡先" />
@code {
private readonly AggregateDataverseChartDataSource _source = new()
{
TableName = "contact",
GroupByColumn = "ppp_age",
GroupByRangeSize = 5, // 0 – 4, 5 – 9, 10 – 14 …
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
};
}連絡先は年齢別にカウントされます。各バーがカバーする年数、または年齢ごとにバーを選びます。各ピックは新しいデータソースを構築し、ソースが別のものを求めているためチャートは再度読み込みます。
範囲の列がバーではなくシリーズである場合は SeriesRangeSize 設定:チャートはバーを GroupByColumn ごとにグループ化し、それぞれの SeriesColumnの範囲ごとにデータセットに分割します。積み重ねると、各バーはその合計がレンジ間でどのように割れるかを示します。両方とも同時にレンジ内に含まれます — 軸に年齢、各バーに積み重ねる給与レンジ。
const source = useMemo(
() =>
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'gendercode',
seriesColumn: 'ppp_age',
seriesRangeSize: 20, // 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, // 0 – 19、20 – 39、40 – 59 ...
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
};
}コンタクトは性別ごとに数えられ、各バーは年齢層ごとに積み重ねられています。各範囲が何年をカバーしているかを選びます。凡例は範囲を最も低い方から示しています。
列に値のないレコードは、それ自体がバーとなり、 (Blank) とラベル付けされたり、シリーズ単位で (Blank) データセットと呼ばれます。これは範囲だけでなく、どのグループにも当てはまります。 GroupByIncludeBlank または SeriesIncludeBlank を false に設定してチャートから除外してください。
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'ppp_age',
groupByRangeSize: 10,
groupByIncludeBlank: false, // (ブランク)バーなし
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
});_source = new AggregateDataverseChartDataSource
{
TableName = "contact",
GroupByColumn = "ppp_age",
GroupByRangeSize = 10,
GroupByIncludeBlank = false, // (ブランク)バーなし
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
};グリッドとViewDataSourceを共有するチャートも同様に範囲をグループ化します。集計のGroupBy(またはSeries)にRangeSizeを設定します。バーをクリックすると、その範囲内の値が入っているグリッドのすべての行をハイライトし、(Blank)バーをクリックすると値のない行がハイライトされます。
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,
},
],
});範囲内のチャートは最大10,000行の値、つまり異なる値や、系列が分割した値のペアを読み取ることができます。多い行は不完全なチャートではなくエラー表示を示します。ホストの起動時に RangeGroupingOptions.MaximumRangedValues を設定し、ポータル内のすべてのグリッドとチャートでその制限を変更するようにしてください。チャートは独自の下限値を MaximumRangedValues (maximumRangedValues)で要求できます。ポータルの上限を超えるものはポータルの上限に拘束されます。
// このチャートでは、より少ない数字が示されています
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'ppp_age',
groupByRangeSize: 5,
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
maximumRangedValues: 2000,
});// Program.cs — ポータル内のすべてのグリッドとチャート
builder.Services.Configure<RangeGroupingOptions>(o => o.MaximumRangedValues = 20_000);
// このチャートでは、より少ない数字が示されています
_source = new AggregateDataverseChartDataSource
{
TableName = "contact",
GroupByColumn = "ppp_age",
GroupByRangeSize = 5,
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
MaximumRangedValues = 2_000,
};Dataverseは最大5,000行のクエリを返すため、4,999を超えると値が5,000行ずつ読み込まれます。制限を引き上げると、その列に同じ値を持つすべてのグリッドやチャートに対して以下のコストがかかります:
SplitOverRecordLimitと分割し、リクエスト数を再び増やすことができます。その数の値を持つ列は、同じ行を読み込みつつバー数を減らす大きな範囲にまとめる方が適しているか、最初にフィルタリングして行数が少なくて済むことが多いです。
関連項目