Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

5分でわかるActiveReports帳票(2013年度版)-グラフ表示

ActiveReports for .NET 7.0Jで作るサンプル帳票(7)

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

 今回は、グラフ(チャート)について解説します。ActiveReportsのグラフにはさまざまな機能が用意されています。そのすべてを解説することは難しいので、ここでは基本的な使用方法と、使用できるグラフのいくつかを紹介することにします。

 セクションレポートとページレポートのグラフは、使用方法や作成できるグラフの種類がまったく異なります。それぞれのレポートで使用できるグラフの種類については、こちらのナレッジ文書を参照してください。

 本記事では、前半はセクションレポート、後半はページレポートのグラフを解説します。

 なお、以下の本文中では、コントロールとして説明する場合は「Chartコントロール」、それ以外の場合(例:レポート上に実際に表示されるグラフ画像など)は「グラフ」と表記いたします。

備考

 本稿は、連載『5分でわかるActiveReports帳票(2007年度版)』(渡辺俊史・宮本奈紗 著)の増補改訂版です。

セクションレポートのグラフ 1

 セクションレポートのツールボックスから、Chartコントロールをレポート内に貼り付けることで、レポートにグラフを表示することができます。

 このChartコントロール配置時に自動的に「グラフウィザード」が開き、使用するグラフの種類を設定できます。ここでは「2D棒グラフ」に設定します。

 なお、最初に作るグラフでは、説明を簡略化するために、レポート自体にはデータソースを設定しません。この状態でDetailセクション上にChartコントロールを配置すると、グラフのみが表示されるレポートができます。

 配置した時点ではダミーデータが表示されます。デフォルトで表示されるグラフは下図のようになります。

初期状態のグラフ
初期状態のグラフ

 デフォルトの状態では、上下にヘッダとフッタ、右側に凡例(系列の情報を表示する)が表示されます(これらは設定で非表示にすることも可能です)。

 このChartコントロールを元にグラフの作成方法を説明いたします。

グラフの種類の設定

 Chartコントロールを選択した状態では、プロパティウィンドウのコマンドペインに、いくつか項目が表示されます。グラフのさまざまな設定はここから行うことができます(コマンドペインが表示されない場合はこちらのナレッジ文書をご覧ください)。

コマンドペインに表示される項目
コマンドペインに表示される項目

 最初に「グラフウィザード」を開いてみます。配置時に自動的に開かれたものと同じダイアログが表示されます。使いたい「グラフの種類」を変更したい場合はここから設定します。

グラフウィザードダイアログ
グラフウィザードダイアログ

 「グラフの種類」を後から変更すると、プロパティの整合性が失われ、グラフが正しく表示されなくなる場合があるので、「グラフの種類」は最初に設定してください。

セクションレポートのグラフ 2

データソースの設定

 グラフウィザードの「系列」タブを開きます。グラフとして出力するデータソースの設定や表示したいフィールドの設定はここで行います。

グラフウィザードの「系列」タブ
グラフウィザードの「系列」タブ

 最初に、グラフにデータソースを設定します。「データソース」の項目の「…」ボタンをクリックすると、データソースダイアログが表示されます。

 セクションレポートのグラフは、基本的にレポートとは独立しており、レポート本体のデータソースと別個にデータソースを設定する必要があります。データソースダイアログの設定方法はセクションレポート本体の設定方法と同様なので、第1回を参照してください。

グラフのデータソースダイアログ
グラフのデータソースダイアログ

系列の設定

 データソースを設定したら、使用する「系列」と、各系列にデータをバウンドする設定を行います。

 「系列」とは、折れ線グラフでいうと1つの折れ線に相当します。下図の「仙台の気候」グラフでは、最高気温、平均気温、最低気温の3つが折れ線で表されています。それぞれの線が1つの系列になります。

 また、棒グラフで「降水量」が表されています。これも1つの系列になります。つまりこのグラフには、折れ線グラフの「最高気温」「平均気温」「最低気温」の系列、棒グラフの「降水量」の系列が含まれています。

折れ線グラフと棒グラフが混在したグラフ
折れ線グラフと棒グラフが混在したグラフ

 なお、Chartコントロール配置時に表示されるグラフウィザードでは、「系列」の項目にはデフォルトで3個の系列が含まれております。追加ボタンや削除ボタンを使って、表示したいグラフの数にあわせて系列を設定します。

系列のプロパティとデータバウンドの設定

 「仙台の気候」のグラフに折れ線グラフと棒グラフが含まれているように、グラフの種類によっては1つのChartコントロール内に複数の種類のグラフを混在させることができます。混在できるグラフの種類に関しては、製品ヘルプの[概念]-[セクションレポートの概念]-[グラフ]-[グラフの種類]を参照してください。

 一部の系列に対してのみグラフの種類を変更したい場合、一覧の中から系列を選択し、「プロパティ」項目の「グラフの種類」を変更します。

 最後に、系列にデータをバウンドします。

 データソースが正しく設定されていれば、「データバウンド」のコンボボックスの選択リストにデータソース内のフィールドが表示されます。グラフのX値、Y値として適切なフィールドを選択します。一般にY値には数値を表すフィールドを設定します。またXYグラフではX値にも数値を表すフィールドを設定します。

系列にフィールドをバウンドする
系列にフィールドをバウンドする

実行

 設定が完了したグラフを表示すると、下図のようになります。

単純なグラフ
単純なグラフ

グラフデザイナによる設定

 前述のとおり、グラフのデータソースと系列を設定するだけでグラフを表示することは可能です。しかしながら、実際には、「Y軸に目盛を設定したい」「棒や折れ線の色を変更したい」「凡例を消去したい」など、さまざまな要求仕様があります。

 こうしたグラフの各種設定は、「グラフウィザード」の他に「グラフデザイナ」で行うことができます。使い分けとしては、グラフウィザードでグラフの種類などの大まかな設定を行い、グラフデザイナで表示の細かい設定を行うことになります。

グラフデザイナ
グラフデザイナ

セクションレポートのグラフ例

 以下、セクションレポートで実現できるグラフをいくつか紹介します。

3D棒グラフ
3D棒グラフ
積層棒グラフ
積層棒グラフ
バブルチャート
バブルチャート
3D円グラフ
3D円グラフ
ベジェXYグラフ
ベジェXYグラフ
ローソク足チャート
ローソク足チャート

ページレポートのグラフ 1

 ページレポートでもグラフを表示することができます。また、ページレポートのグラフとセクションレポートのグラフは、基本的な概念が異なります。

  • ページレポートのグラフでは、Matrixと同じように、グラフに表示されるのは「集計値」です。一方、セクションレポートのグラフには集計をする機能はありません。
     
  • セクションレポートのグラフでは、フィールドがそれぞれ系列です。ページレポートのグラフでもフィールドを系列とすることができますが、それ以外に、「系列フィールド」を設定することで、同じフィールドのデータを別の系列に分割することができます。

ページレポートのグラフの作成

 では、実際にページレポートでグラフを作成してみましょう。

 プロジェクトにページレポートを追加して、データソース、データセットを追加します(これらの方法については第2回をご参照ください)。今回はグラフ用のサンプルデータベースを使用します。

 サンプルとして、たい焼きとたこ焼きを売る屋台の3日間の売上データを使います。具体的には、以下のようなデータです。日付(Date)、午前・午後(AmPm)、たい焼きの売上(TaiyakiSales)、たこ焼きの売上(TakoyakiSales)がそれぞれフィールドとなっています。

屋台の売上のサンプルデータ
Date AmPm TaiyakiSales TakoyakiSales
1日目 AM 500 2500
1日目 PM 1400 4000
2日目 AM 800 2500
2日目 PM 2200 6500
3日目 AM 700 3500
3日目 PM 3200 8000

 まず、ページレポート上にChartコントロールを配置します。このときグラフの種類が表示されるので、使用したいものを選びます。

グラフを配置した時の初期画面
グラフを配置した時の初期画面

 なお、この中には円グラフなどが含まれていません。円グラフを使いたい場合には、Chartを貼り付けた後、プロパティウィンドウのコマンドペインから「外観」を選択します。Chart外観ダイアログが表示されます。「拡張」ボタンを押すと、初期表示以外のグラフが選択できるようになります。

Chart外観ダイアログの拡張グラフ
Chart外観ダイアログの拡張グラフ

 ここではまず、基本的な縦棒グラフを作成してみましょう。

 「縦棒グラフ」を選択すると、簡単なダミーデータを表示するグラフが現れます。これにデータを接続していきます。

 データの接続はデザイン画面からGUIで実行することができます。Chartコントロールを2回クリックすると、コントロールの上、下、右にタブが現れます。それぞれ「データフィールドを配置してください」「カテゴリフィールドを配置してください」「系列フィールドを配置してください(オプション)」と表示されています。

Chartコントロールの周囲に現れるタブ
Chartコントロールの周囲に現れるタブ

ページレポートのグラフ 2

単純なグラフの作成

 まず、X値とするものを「カテゴリフィールド」に配置します。日付ごとの売上を出したい時には、「Date」フィールドをレポートエクスプローラのデータセットを展開したフィールドから、Chartの下部、「カテゴリフィールドを配置してください」というタブにドロップします。

 次にY値となるものを「データフィールド」に配置します。たい焼き、たこ焼きそれぞれの売上を表示したい場合、「TaiyakiSales」と「TakoyakiSales」の2つのフィールドを順に、Chart上部の「データフィールドを配置してください」というタブにドロップします。

 これでグラフが完成します。プレビューを見てみると、たい焼き、たこ焼きのそれぞれの売上が日付ごとに表示されています。

 プロパティウィンドウのコマンドペインにある「Chartデータ」ダイアログから「系列」の内容を見てみると、TaiyakiSalesを表す系列の値は「=Sum([TaiyakiSales])」となって、日ごとの集計になっていることが分かります。実際、1日目のTaiyakiSalesの値は1900を表しており、AM、PMのデータが合計されていることが分かります。

カテゴリフィールド、データフィールドを使ったグラフ
カテゴリフィールド、データフィールドを使ったグラフ

系列フィールドを使ったグラフの作成

 上記のグラフでは、データフィールドに2つのフィールドを設定することで、2つの系列を表示していました。

 系列を加えるためには、もう一つ、系列フィールドを使う方法があります。

 先程のデータでは、午前・午後を表す「AmPm」のフィールドがありました。これを「系列フィールドを配置してください(オプション)」の所にドロップします。

 このフィールドには、「AM」か「PM」の2種だけのデータが入っています。この2種でデータが分類され、たい焼きの売上、たこ焼きの売上それぞれに対し、AM・PMごとにデータが分けられました。系列の数は、「データフィールドに設定したフィールドの数が2」で、「系列フィールドに含まれる値の種類が2」なので、2×2=4です。

系列フィールドを使ったグラフ
系列フィールドを使ったグラフ

 なお、ここで表示したグラフでは、値が分かりやすいようにY軸のグリッド線を表示させています。デフォルトでは表示されないのでご注意ください。グリッド線の表示や、X軸・Y軸に表示する書式などは、プロパティウィンドウのコマンドペインにある[グラフ X軸...]ダイアログや[グラフ Y軸...]ダイアログで設定することができます。

ページレポートのグラフ例

 以下、ページレポートで使用できるグラフをいくつか紹介します。

折れ線グラフ
折れ線グラフ
積層%グラフ
積層%グラフ
ドーナツグラフ
ドーナツグラフ
HiLoOpenCloseチャート
HiLoOpenCloseチャート

まとめ

 今回は、セクションレポートとページレポートでグラフを表示する基本的な方法を解説しました。

 次回は、WebアプリケーションでActiveReportsを使用する方法と、PDFやExcelなど、別のファイル形式に変換する方法(エクスポート)を紹介します。

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

著者プロフィール

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5