SpreadJS テーブルシート入門6 スライス

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

グループのサブ集計を実現するスライス機能

テーブルシートの「スライス」機能は、グループ集計したデータのサブ集計を実現する機能です。この機能は前回ご紹介したグループ集計機能と同じく、テーブルシートのgroupByメソッドに含まれており、オプション引数を以下のように設定することで有効になります(強調部分をご確認ください)。

// groupByメソッド使い、グループ化を設定します
tableSheet.groupBy([{
    caption: "カテゴリ",
    field: "categoryName",
    width: 125,
    // グループ集計を設定します
    summaryFields: [{
        caption: "受注合計",
        formula: "=SUM([unitsOnOrder])",
        width: 125,
        // サブ集計(スライス)を設定します
        slice: {
            field: "=YEAR([@orderDate])"
        },
    }]
}]);

次に示すのは上記のコードを前回のサンプルで実行した場合の例です(“Run Project”をクリックするとデモが起動します)。グループ集計の結果である「受注合計」列に加え、受注年を基準としたサブ集計列(「2021」列と「2022」列)がビューに追加されています。


sliceオプション

上記のサンプルでgroupByメソッドのオプションに設定したsliceはスライス設定のためのオプションです。このオプションではスライス機能に関する以下のような設定が可能です。

オプション名機能
captionサブ集計列ヘッダのキャプションを設定します
conditionalFormatsサブ集計列のデータに条件付き書式を設定します
fieldサブ集計の対象とするデータフィールドの情報を設定します
headerFitヘッダのキャプション表示方法を指定します
headerStyleヘッダのスタイルを設定します
styleサブ集計列のスタイルを設定します
validatorサブ集計列に検証を設定します
widthサブ集計列の幅を設定します

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

サブ集計するデータフィールドの指定

加えて、キーとなる設定はfieldオプションです。このオプションにはサブ集計したいデータフィールド要素を設定します。例えば今回のサンプルでは以下のような設定を行いました。

=YEAR([@orderDate])

orderDateはサンプルにおける受注日データのデータフィールド名です。YEAR関数でこのデータフィールドから「年」データを取り出し、fieldオプションに設定しています。これにより、受注合計に対する「年」ごとサブ集計が実行されます。

さいごに

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

\  この記事をシェアする  /