チュートリアル6.1: グラフを使用したシンプルなレポートの作成

グラフを使用して簡単にデータを表示することができます。

このチュートリアルのねらい

このチュートリアルでは、Chartデータ領域を使用したレポートを作成する手順を紹介します。

メモ: このチュートリアルでは、サンプルの共有データセット「売上情報_年間」を使用します。 共有データソース/共有データセットは管理者ダッシュボードで表示、編集することができます。共有データセットの追加についての詳細は、「チュートリアル7.1: 共有データセットの追加」を参照してください。

このチュートリアルを完了すると、次のようなレポートが作成されます。

ActiveReports Server HTML5 Webデザイナにアクセスしてデータセットを設定する

  1. ActiveReports Server利用者ポータルで、[新規レポート]をクリックします。
    ActiveReports Server HTML5 Webデザイナが新しいブラウザタブで開きます。
  2. [テンプレートの選択]セクションに表示されているテンプレートのリストから、「00_空白のページレポート」を選択し、デザイナの下部にある[レポートの作成]をクリックします。新規レポートのページが開かれます。
    これで、Webデザイナでのレポートのデザインが可能になります。
  3. Webデザイナの右上にある[データ]アイコンをクリックします。
  4. [データセット]セクションの横にある[+ 追加]をクリックし、開かれる[データセットの編集]ページで、[共有データセット]セクションにある「売上情報_年間」を選択します。
  5. [追加]をクリックします。売上情報_年間データセットがレポートに追加されます。

レポートレイアウトを作成する

このレポートでは、Chartデータ領域を使用してデータを表示します。デザイナの左側にあるレポートコントロールのリストからChartデータ領域をレポートのデザイン領域上へとドラッグ&ドロップします。

デフォルトのグラフの種類は「Column - Plain」(縦棒プレーン)です。グラフの種類は、グラフのタイププロパティから変更することができます。

Chartデータ領域にデータをバインドする

  1. [データ]タブの[データセット]セクションで、追加した売上情報_年間データセットのドロップダウンを開きます。使用可能なフィールドのリストから、フィールドを[カテゴリフィールド] 領域へとドラッグ&ドロップします。これにより、月フィールドがグラフのX軸に自動的にバインドされます。
  2. 売上高フィールドと目標値フィールドを[データフィールド]領域へとドラッグ&ドロップします。
    これにより、売上高フィールドと目標値フィールドがグラフのY軸にプロットされます。

    データフィールドに売上高の合計を表示するために、次の手順を行います。
  3. [データフィールド]領域から売上高を選択します。
  4. [プロパティ]タブへと移動し、[共通]セクションにあるデータ値プロパティの横にある[項目の表示]をクリックします。
  5. 表示されるボックス内の式を次のように編集します。=Sum(Fields!売上高.Value)

       
    メモ: グラフのデータセットプロパティはすでに売上情報_年間データセットに設定されています。

レポートタイトルを追加する

グラフとX軸、Y軸にタイトルを追加しましょう。

  1. デザイナの左上にある[エクスプローラ]をクリックし、Chart1(名前を変更した場合はそのChartの名前)の下にある[タイトル]を選択します。
  2. [プロパティ]タブへと移動し、[共通]セクションのキャプションプロパティを「2014年度 売上高推移」に変更します。
  3. [エクスプローラ]で、[カテゴリ軸]の下にある[タイトル]を選択し、キャプションプロパティを「月」に変更します。
  4. [エクスプローラ]で、[値軸 Y1]の下にある[タイトル]を選択し、キャプションプロパティを「売上高」に変更します。
  5. [エクスプローラ]で、[凡例]を選択し、[レイアウト]セクションにある配置プロパティを「TopCenter」に変更します。

グラフレポートの外観をカスタマイズする

グラフと各ラベル、軸の外観をカスタマイズしていきましょう。

メモ: 必要に応じて、レポートに配置したChartデータ領域のサイズや位置を調整してください。

  1. X軸に表示される月名を昇順に並べ替えるために、次の手順を行います。

  2. デザイン領域上のグラフを選択し、表示される各フィールドのうち、[カテゴリフィールド]のChart1_カテゴリを選択します。
  3. [プロパティ]タブへと移動し、[共通]セクションの[並べ替えの式]プロパティの[項目の表示]をクリックします。
  4. [項目の追加]をクリックします。
  5. 開かれるボックスの横にあるラジオボタンをクリックし、表示されるデータセットフィールドのリストからを選択します。デフォルトの並べ替えの順番は昇順です。

    X軸の各ラベルの表示を調整するために、次の手順を行います。
  6. デザイン領域上に表示さている各フィールドのうち、[カテゴリフィールド]のChart1_カテゴリを選択します。
  7. [プロパティ]タブの[共通]セクションにあるラベルプロパティの式を、次のように設定します。=Fields!月.Value & "月"

    目標値フィールドのグラフの種類を定義するために、次の手順を行います。
  8. [データフィールド]領域の目標値を選択します。
  9. [プロパティ]タブの[共通]セクションにある種類プロパティの横にあるドロップダウンを開き、「Line - Plain」を選択します。

    Y軸の値を通貨記号付きで表示するために、次の手順を行います。
  10. デザイナの左上にある[エクスプローラ]で[値軸 Y1]を選択します。
  11. [プロパティ]タブの[ラベル]セクションにある表示形式プロパティの横にあるドロップダウンを開き、「Currency (digit: 0)」を選択します。

    Y軸に表示する金額の範囲を設定するために、次の手順を行います。
  12. [エクスプローラ]で[値軸 Y1]を選択します。
  13. [プロパティ]タブの[スケール]セクションにある最小プロパティを「0」に、最大プロパティを「」「100000000」に設定します。

    グラフの色を変更するために、次の手順を行います。
  14. [エクスプローラ]でChart1を選択します。
  15. [プロパティ]タブの[共通]セクションにあるパレットプロパティの横にあるドロップダウンを開き、表示されるリストからExcelを選択します。

レポートを表示/保存する

  1. デザイナの左上にある[プレビュー]をクリックして、レポートの最終結果を表示します。
  2. プレビューモードを終了するには、デザイナの左上にある[戻る]をクリックします。
  3. デザイナ上部にあるリボンタブから[ファイル]タブへと移動します。[名前を付けて保存]をクリックし、画面下部に表示される[新規レポート]の名前を任意のものに変更して[レポートの保存]をクリックします。レポートの説明やリビジョンコメントを追加することもできます。

 

 


©2017 GrapeCity inc. All rights reserved.