「ActiveReportsJS」のTablixコントロールで、複数データのクロス集計にトライ

はじめに

　グレープシティのJavaScriptライブラリ「ActiveReportsJS」は、サーバー側処理ではなく、WebブラウザのJavaScript処理で帳票を出力できるライブラリです。本連載では、ActiveReportsJSの活用法を複数回に分けて紹介しています。

　前回記事では、Tableレポートコントロールを利用したデータ処理・表示について説明しました。Tableでは行方向に複数データをリスト表示できますが、列方向の表示項目は固定でした。

　ActiveReportsJSでは、行と列の両方向にデータ項目を動的に設定して、より柔軟な表を表示できる、Tablixレポートコントロールが利用できます。集計対象データをTablixに設定することで、例えば図1の通り、職業を行方向に、利用している携帯電話会社を列方向に割り当てて、利用者数を集計できます。このような集計方法をクロス集計と呼び、「会社員はA社、学生はB社の利用者が多い」といった複数データの関連性を読み取るのに利用できます。

　本記事では、Tablixレポートコントロールを利用してさまざまなクロス集計を行う方法を、サンプルとともに説明していきます。

対象読者

• Webページに帳票出力機能を実装したい方
• 複数データを掛け合わせたクロス集計をWebページ上で行いたい方
• 元のデータは加工せず、データ処理はライブラリに任せたい方

必要な環境

　本記事のサンプルコードは、以下の環境で動作を確認しています。Node.jsは、ActiveReportsJSの動作に必ずしも必要ではありませんが、ローカルでWebサーバーを動作させるために利用しています。

Windows 10 64bit版

• ActiveReportsJS 1.2.0
• Microsoft Edge 84.0.522.52
• Node.js v12.18.3 64bit版

　サンプルコードを動作させるには、ActiveReportsJSのトライアル版が必要になります。公式ページからダウンロードしてください。トライアル版のZipファイルから、distフォルダーの内容をサンプルコードのactivereportsjsフォルダーにコピーします。次に「npm install」コマンドを実行してライブラリをダウンロード後、「npm run start」コマンドを実行すると、Webブラウザが開いてWebページが表示されます。

本記事で集計するデータ

　ActiveReportsJSでデータを帳票に反映するには、JSON形式のデータを帳票の「データソース」に登録して、そこから作成した「データセット」をレポートコントロールに設定します。詳細な手順は過去記事を参照してください。

　本記事で利用するデータのJSONファイルを、リスト1に示します。

[
  {
    "id": 1,
    "sex": "女性",
    "job": "会社員",
    "carrier": "A社",
    "os": "iOS",
    "sns": "Twitter",
    "savings": 3600000
  },
  {
    "id": 2,
    "sex": "女性",
    "job": "学生",
    "carrier": "B社",
    "os": "Android",
    "sns": "Twitter",
    "savings": 500000
  },
（略：あと98組のデータが存在）
]

　リスト1は、100人に対して携帯電話やSNSの利用状況、貯金額をアンケート調査した想定のデータで、データ項目は表2の通りです。

　本記事ではリスト1のデータをもとに、Tablixレポートコントロールでさまざまなクロス集計表を表示していきます。Tablixを利用すれば、データを自動的に集計して表を表示できるため、開発者が集計処理を実装する必要はありません。