Angular データ集計

Ignite UI for Angular IgxCategoryChartComponent コントロールのデータ集計機能を使用すると、チャート内のデータを X 軸のデータ メンバーの一意の値でグループ化し、それらのグループをソートすることができます。次に、Y 軸の範囲に反映され、シリーズにカーソルを合わせるとツールチップに表示される集計を適用できます。

Angular データ集計の例

次の例は、X 軸の Country メンバーごとにグループ化する縦棒チャートを示しており、各データ項目内の他のプロパティ (Product、MonthName、Year など) に変更して販売データを集計できます。また、グループ化されたプロパティを望ましい順序で取得するために、概要とソートのオプションも利用できます。

initialSummaries と groupSorts のドロップダウン内にある短縮関数は、割り当てたプロパティに基づいて正しい結果が得られるように適用されていることに注意してください (例: Sum(sales) as Sales | Sales Desc)。

<igx-category-chart
    #chart
    [dataSource]="salesData"
    initialGroups="Country"
    initialSummaries="Sum(Sales) as Sales"
    groupSorts="Sales Desc">
</igx-category-chart>

API リファレンス