SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

「ActiveReportsJS」ではじめるフロントエンド帳票開発(AD)

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

「ActiveReportsJS」ではじめるフロントエンド帳票開発 第3回

  • このエントリーをはてなブックマークに追加

Tablixウィザードで最初のクロス集計表を作成

 最初に、Tablixの設定を一括して行える「Tablixウィザード」を利用して、図1のクロス集計表を作成する方法を説明します。リスト1のデータを帳票デザインのデータソース・データセットに設定した後、画面左側のコントロールリストから「Tablix」をデザイン面にドラッグアンドドロップすると、Tablixウィザードが表示されます。

図2 Tablixを配置してTablixウィザードを表示(p001-basic/p001-basic.rdlx-json)
図2 Tablixを配置してTablixウィザードを表示(p001-basic/p001-basic.rdlx-json)

 Tablixウィザードでは、行と列に割り当てるデータ項目をそれぞれ「行」と「列」欄に、集計対象のデータ項目を「値」欄に、それぞれ設定します。図1の通り表示するには、「行」にjob(職業)、「列」にcarrier(携帯電話会社)、「値」にid(データのID)を、それぞれドラッグアンドドロップします。

図3 Tablixウィザードで「行」「列」「値」を設定(p001-basic/p001-basic.rdlx-json)
図3 Tablixウィザードで「行」「列」「値」を設定(p001-basic/p001-basic.rdlx-json)

 次に、ドラッグアンドドロップした項目の設定を調整します。「行」と「列」では、項目右側のアイコンをクリックして、データの並び順と表示形式が指定できます(図4)。ここでは並び順に昇順を指定し、表示形式は初期値のDefault(デフォルト値)を受け入れます。

図4 「行」「列」の設定調整(p001-basic/p001-basic.rdlx-json)
図4 「行」「列」の設定調整(p001-basic/p001-basic.rdlx-json)

 「値」では同様の操作で、集計方法と表示形式が指定できます(図5)。集計方法はCount(データ数を集計)、表示形式はDefaultが初期設定されるので、ここではそのまま受け入れます。

図5 「値」の設定調整(p001-basic/p001-basic.rdlx-json)
図5 「値」の設定調整(p001-basic/p001-basic.rdlx-json)

 ここで一度「OK」をクリックしてTablixウィザードを閉じると、Tablixがデザイン面に配置されていることが確認できます。Tablixは左上の固定領域「コーナー」、行方向のグループに対応する「行グループ」、列方向のグループに対応する「列グループ」、集計値を表示する「本体」の、4つの領域から構成されます。Tablixウィザードの「行」「列」に設定したデータ項目が、それぞれ行グループ、列グループに表示され、対応する集計値が本体に表示されます。

 また、Tablix本体とは別に、行/列方向に動的に複数項目を表示するグレー(網掛け)の領域が表示されるので、行/列のデータ数を想定してグレー(網掛け)の部分を引き延ばしておきます。

図6 Tablixの構成(p001-basic/p001-basic.rdlx-json)
図6 Tablixの構成(p001-basic/p001-basic.rdlx-json)

 図1の通り表示するため、Tablixに追加の設定を行います。行と列の合計を表示させるため、図6の歯車アイコンをクリックしてTablixウィザードを再表示させて、「レイアウトオプション」で「合計」の「行の合計」と「列の合計」をチェックします。また、罫線を表示させるため、「スタイル」で「No Style Tablix Grid」を選択します。

図7 レイアウトオプションを追加設定(p001-basic/p001-basic.rdlx-json)
図7 レイアウトオプションを追加設定(p001-basic/p001-basic.rdlx-json)

 設定後は図8の通り、Tablixに合計のセルが追加されます。このTablixを帳票表示すると、図1の通り表示されます。

図8 合計の表示が設定されたTablix(p001-basic/p001-basic.rdlx-json)
図8 合計のセルが追加されたTablix(p001-basic/p001-basic.rdlx-json)

[補足]Tablixウィザードのレイアウトオプション

 Tablixウィザードのレイアウトオプションで行える設定は表3の通りです。

表3 レイアウトオプションで行える設定
No. 項目名 設定できる内容
1 合計 行/列の合計や小計を表示
2 スタイル スタイルを設定
3 構成 グループの展開/折り畳みや並べ替えのボタンを表示

[補足]集計方法の設定例

 図1ではデータ数を表示するため、Tablixウィザードの「値」欄にはidの個数(Count)が表示されるようにしました。TablixウィザードではCountのほかに、合計(Sum)、平均(Avg)、最小値(Min)、最大値(Max)の集計方法が指定できます。図9では、savings(貯金額)に対してAvgを指定して、平均を集計するようにしています。

図9 Tablixウィザードで集計の方法を指定(p002-avg/p002-avg.rdlx-json)
図9 Tablixウィザードで集計の方法を指定(p002-avg/p002-avg.rdlx-json)

 図9の設定により、貯金額の平均をクロス集計した表を図10の通り表示できます。詳細はサンプルコード(p002-avg)を参照してください。

図10 貯金額の平均をクロス集計した例(p002-avg)
図10 貯金額の平均をクロス集計した例(p002-avg)

次のページ
より複雑なクロス集計表をTablixで作成

関連リンク

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
「ActiveReportsJS」ではじめるフロントエンド帳票開発連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/12756 2020/09/10 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング