JavaScript/SpreadJS/テーブルシート入門

SpreadJS テーブルシート入門5 グループ集計

by MESCIUS-dev

このシリーズでは、SpreadJS（スプレッドJS）に搭載の「テーブルシート」機能について基本的な使い方や便利な応用例などをご紹介します。今回のテーマは、前回ご紹介したグループ化機能に含まれる「グループ集計」です。

グループ集計

テーブルシートには、グループ化したデータの集計機能があります。この機能は前回ご紹介したgroupByメソッドに含まれており、オプション引数を以下のように追加設定することで有効になります（強調部分をご確認ください）。

// groupByメソッド使い、グループ化を設定します
tableSheet.groupBy([{
    caption: "カテゴリ",
    field: "categoryName",
    width: 150,
    headerStyle: groupHeaderStyle,
    style: groupStyle,
    // グループ集計を設定します
    summaryFields: [{
        caption: "在庫合計",
        formula: "=SUM([unitsInStock])",
        width: 150
    }]
}]);

次の示すのは上記のコードを前回のサンプルに実装した場合の例です。グループ化で表示されたグループ列に加えて、その集計列「在庫合計」がシートに挿入されています。


summaryFieldsオプション

上記でgroupByメソッドに追加設定したオプション引数のsummaryFieldsでは、集計列に関する以下のような設定が可能です。

オプション名機能
caption集計列ヘッダのキャプションを設定します
conditionalFormats列のデータに条件付き書式を設定します
formula集計方法を数式で設定します
headerFitヘッダのキャプション表示方法を指定します
headerStyleヘッダのスタイルを設定します
sliceスライス集計を設定します
style集計列のスタイルを設定します
validator集計列に検証を設定します
width集計列の幅を設定します

このうち多くの機能は集計列の外観を調整するもので、前回ご紹介したグループ列のオプションと同様の用法で設定できます（captionやstyleなどグループ列のオプションと同名のもの）。

数式・関数による集計方法の指定

加えて、グループ集計のキーとなるのがformulaです。名前が示す通り、このオプションでは数式・関数を設定して集計方法を指定します。例えば冒頭のソースでは以下のような設定を行いました。

=SUM([unitsInStock])

unitsInStockはサンプルにおける在庫データのデータフィールド名です。これをSUM関数で集計することで、グループごとの在庫合計をテーブルシートに表示しています。

応用例

このほか同オプションでは豊富な関数を利用可能です。例えば合計だけではなく、Average関数を使ったグループごとの平均や、Max関数やMin関数を使った最大・最小値の表示といった自由度の高い集計を実現できます。次に示すのはその活用例です。



上記のサンプルでは、IF関数とMIN関数を使いformulaオプションに以下のような数式を設定しています。

=IF(40>MIN([unitsInStock]),"在庫注意","在庫良好")

この数式により集計列「在庫状況」では、グループ化したカテゴリの在庫で40を下回るものがある場合に「在庫注意」、それ以外の場合では「在庫良好」という表示が行われます。

また、conditionalFormatsオプションを使った条件付き書式設定により、それぞれの在庫状況でフォント色が変わるように設定を行っています。

formulaオプションおよびconditionalFormatsオプションの設定については上記サンプルのほか、以下のソースコード（強調部分）をご参照ください。

// 集計列のスタイルを定義します
var summaryStyleGood = {
  foreColor: '#007700',
};
var summaryStyleCaution = {
  foreColor: '#BB2353',
};

// グループ化を設定します
tableSheet.groupBy([
  {
    caption: 'カテゴリ',
    field: 'categoryName',
    width: 123,
    // グループのサマリーフィールドを追加します
    summaryFields: [
      {
        caption: '在庫状況',
        formula: '=IF(40>MIN([unitsInStock]),"在庫注意","在庫良好")',
        conditionalFormats: [
          /* 条件付き書式で、集計列が「在庫注意」の場合にフォント色を変更します */
          {
            ruleType: 'cellValueRule',
            comparisonOperator: GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.equalsTo,
            value1: '在庫注意',
            style: summaryStyleCaution,
          },
          /* 条件付き書式で、集計列が「在庫良好」の場合にフォント色を変更します */
          {
            ruleType: 'cellValueRule',
            comparisonOperator: GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.equalsTo,
            value1: '在庫良好',
            style: summaryStyleGood,
          },
        ],
        width: 123,
      },
    ],
  },
]);

さいごに

テーブルシート入門シリーズ、第5回はグループ化したデータの集計についてご紹介しました。本シリーズでは引き続きテーブルシートのさまざまな機能をご紹介していくほか、弊社Webサイトではテーブルシートを手軽に試せるデモアプリケーションや無料のトライアル版をご用意していますので、ぜひ、そちらもご確認ください。

＼  この記事をシェアする  ／