SHOEISHA iD

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

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

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

帳票出力でデータの集計や分類を行える「ActiveReportsJS」のテーブル機能

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

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

表に表示したデータの集計

 Tableレポートコントロールでは、表に表示したデータの合計や平均などを集計して表示できます。図2のサンプルでは、表に表示した機種数、在庫総数、価格の平均/最大値/最小値を表示します。

図2 データを集計して表示するサンプル(p001-aggregate)
図2 データを集計して表示するサンプル(p001-aggregate)

 Tableレポートコントロールでは、複数のデータから集計を行うさまざまな関数が利用できます。図2のサンプルで利用する関数とその役割、セルに指定する式は、表3の通りです。

表3 図2のサンプルで利用する集計の式
No. 関数 内容 指定する式 式の意味
1 Count データ数 =Count(Fields!name.Value) 機種数(nameの数)
2 Sum 合計 =Sum(Fields!stock.Value) 在庫総数(stockの合計)
3 Avg 平均 =Avg(Fields!price.Value) 平均価格(priceの平均)
4 Max 最大値 =Max(Fields!price.Value) 最高値(priceの最大値)
5 Min 最小値 =Min(Fields!price.Value) 最安値(priceの最小値)

 式を設定するには、帳票デザイナの式エディタが利用できます。前回記事ではセルを選択して表示されるプロパティから式エディタを表示しましたが、セルを右クリックして表示されるコンテキストメニューの「式」を選択して式エディタを表示させることもできます(図3)

図3 コンテキストメニューから式エディタを表示する操作(p001-aggregate/p001-aggregate.rdlx-json)
図3 コンテキストメニューから式エディタを表示する操作(p001-aggregate/p001-aggregate.rdlx-json)

 表示された式エディタでは、まず関数を選択します。「共通の関数」-「集計」-「Count」をダブルクリックすると、式エディタにCount関数が入力されます。

図4 式エディタで関数を選択(p001-aggregate/p001-aggregate.rdlx-json)
図4 式エディタで関数を選択(p001-aggregate/p001-aggregate.rdlx-json)

 次に関数の引数を設定します。「データセット」-「データセット1」-「name」をダブルクリックすると、関数の引数にnameが反映されます。

図5 式エディタで関数の引数を設定(p001-aggregate/p001-aggregate.rdlx-json)
図5 式エディタで関数の引数を設定(p001-aggregate/p001-aggregate.rdlx-json)

 この手順で、各セルに集計関数の式を設定します。操作に慣れた方は、セルやプロパティのテキストボックス、式エディタの入力欄に、表3の「指定する式」を直接入力することもできます。最終的に、集計関数の式を設定した帳票デザインは図6となります。

図6 集計関数の式を設定した帳票デザイン(p001-aggregate/p001-aggregate.rdlx-json)
図6 集計関数の式を設定した帳票デザイン(p001-aggregate/p001-aggregate.rdlx-json)

[補足]表に複数行を設定する方法

 図6の帳票デザインでは、フッタ行を3行にしています。このように表に行を挿入するには、行を挿入する位置をマウスで右クリックして表示されるメニューから「行」を選択します。このとき、挿入場所(上/下)や、挿入する行数を指定できます。また、同じメニューから行を削除することもできます。なお、列についても同様の操作で挿入や削除を行えます。

図7 Tableに行を挿入する操作
図7 Tableに行を挿入する操作

次のページ
データのグループ化

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

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

もっと読む

この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/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】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング