SHOEISHA iD

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

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

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

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

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

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

フィルタでデータを絞り込み

 前回記事で紹介したTable同様、Tablixレポートコントロールでも、特定の条件でデータを絞り込むフィルタ機能が利用できます。図19では、性別と携帯電話会社のフィルタを利用して、性別が女性、携帯電話会社がA社とB社のデータを絞り込み表示しています。

図19 フィルタでデータを絞り込むサンプル(p005-filter)
図19 フィルタでデータを絞り込むサンプル(p005-filter)

 Tablixでのフィルタ利用法を説明します。まず、フィルタの指定内容を、ActiveReportsJSの「パラメータ」機能で作成します。パラメータ設定方法の詳細は、前回記事を参照してください。図19のサンプルでは、表4の設定を行って、性別と携帯電話会社、2種類のパラメータを作成します。

表4 図19のサンプルで利用するパラメータの設定(p005-filter/p005-filter.rdlx-json)
No. 設定項目 設定内容(性別) 設定内容(携帯電話会社)
1 名前 paramSex paramCarrier
2 ダイアログの表示文字列 性別 携帯電話会社
3 データタイプ String
4 複数の値を許可する はい
5 使用できる値 クエリから値を取得
6 データセットの名前 データセット1
7 値フィールド sex carrier
8 ラベルフィールド sex carrier

 表4の通り設定したパラメータを、Tablixの「フィルタ」に設定します(図20)。

図20 Tablixに設定した性別のフィルタ(p005-filter/p005-filter.rdlx-json)
図20 Tablixに設定した性別のフィルタ(p005-filter/p005-filter.rdlx-json)

 以上の設定を行った後で帳票を表示すると、図19の通りフィルタ機能が利用できるようになります。

まとめ

 本記事では、ActiveReportsJSのTablixレポートコントロールを利用して、複数データ項目を掛け合わせて集計するクロス集計の表を作成する方法を説明しました。Tablixの集計機能を利用することで、開発者は集計処理を実装することなく、集計するデータをTablixに渡すだけで複雑なクロス集計を行えます。

 次回は、データからチャートを帳票に表示できる、ActiveReportsJSのチャート機能について説明していきます。

参考資料

関連リンク

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

  • 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/12756 2020/09/10 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング