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

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

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

• Webデザイナにアクセスする
• レポートレイアウトを作成する
• プロットを定義する
• 軸を定義する
• タイトルを追加する
• グラフレポートの外観をカスタマイズする
• レポートを表示／保存する

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

Webデザイナにアクセスする

［ユーザーフォルダ］\WebSamples\WebDesigner_MVCに格納されたWebDesigner_MVCサンプルを実行します。
Webデザイナがブラウザで開かれ、レポートのデザインが可能になります。

以下の説明では、デザイナのプロパティモードにて、［詳細プロパティを表示］を選択した状態の画面イメージにて、説明します。

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

このレポートでは、Chartデータ領域を使用してデータを表示します。レポートコントロールの一覧から、Chartデータ領域をレポートのデザイナ面上にドラッグ＆ドロップします。
 

プロットを定義する

Y軸にプロットされた2つの系列を持つチャートを作成します。そのために、Chartデータ領域に2つのプロットを追加する必要があります。

1. ［プロパティ］タブをクリックし、［共通］セクションの［プロット］プロパティの隣にある［項目の表示］をクリックし、［プロット 1］が既に設定されていることを確認します。
2. ［+ 項目の追加］をクリックして、もう1つのプロットを追加し、［プロット 2］として設定します。これで、［プロット 1］と［プロット 2］のプロットがグラフに設定されます。
   
   プロットのプロパティを設定しましょう。
   
3. ［エクスプローラ］をクリックして、［プロット-プロット 1］を選択し、［プロパティ］タブを表示します。
   
   1. ［共通］セクションの［値］プロパティの隣にある［項目の表示］をクリックし、［+ 項目の追加］を選択します。
   2. 表示される［値 0］の隣にあるをクリックし、［値プロパティ］を表示します。
   3. ［Value］プロパティの隣にある［項目の表示］をクリックします。
   4. 表示されるボックスの隣にあるボタンをクリックしてフィールドのリストを表示し、「UnitsInStock」を選択します。
      
      UnitsInStockフィールドは、データフィールドの下に表示されるフィールドボックスに表示されます。
   5. ［← 値のプロパティ］をクリックして［プロット］に戻り、［エンコーディング］セクションの［カテゴリ］プロパティの隣にある［項目の表示］をクリックし、［+ 項目の追加］を選択します。
   6. 表示されるボックスの隣にあるボタンをクリックしてフィールドのリストを表示し、「CategoryID」を選択します。
   7. ［エンコーディング］セクションの［凡例に値の名前を表示］プロパティを「はい」に設定します。
   8. リボンの［Chart］タブをクリックし、［プロットのテンプレートの設定］の隣にあるドロップダウンから「折れ線」を選択します。
      
4. ［エクスプローラ］をクリックし、［プロット-プロット 2］を選択し、［プロパティ］タブを表示します。
   1. ［プロット-プロット 2］にて手順3.1から手順3.4を繰り返し、［値プロパティ］の［Value］プロパティを「UnitPrice」に設定します。
      
   2. ［プロット-プロット 2］にて手順3.5から手順3.7を繰り返します。
   3. リボンの［Chart］タブをクリックし、［プロットのテンプレートの設定］の隣にあるドロップダウンから「縦棒」を選択します。
                 
      グラフのデータセットプロパティはすでにProductsデータセットに設定されています。

軸、ラベル、凡例を定義する

1. ［エクスプローラ］をクリックし、［Y軸-［プロット 1］］を選択します。
2. ［プロパティ］タブをクリックし、［共通］セクションの［タイトル］プロパティを「在庫数量」に設定します。
3. ［エクスプローラ］より、［Y軸-［プロット 2］］を選択します。
4. ［プロパティ］タブより、［共通］セクションの［タイトル］プロパティを「単価」に設定します。
5. ［プロパティ］タブより、［ラベル］セクションの［表示形式］プロパティを「通貨（桁数: 0）」に設定します。
6. ［エクスプローラ］より、［X軸-［プロット 1］］を選択します。
7. ［プロパティ］タブより、［共通］セクションの［タイトル］プロパティを「CategoryID」に設定します。
8. ［プロット］プロパティの隣にある［項目の表示］をクリックし、［+ 項目の追加］を選択して、次の画像のとおり設定します。
   
9. ［ラベル］セクションの［ラベルの角度］プロパティを「45」に設定します。
10. ［エクスプローラ］より、［グローバル凡例］を選択します。
11. ［プロパティ］タブより、［共通］セクションの［位置］プロパティを「Top」に設定します。

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

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

1. ［エクスプローラ］をクリックし、Chart1（名前を変更した場合はそのChartの名前）の下にある［ヘッダ］を選択します。
   
2. ［プロパティ］タブをクリックし、［共通］セクションの［キャプション］プロパティを「在庫商品」に変更します。   

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

1. ［プレビュー］をクリックして、レポートの最終結果を表示します。
2. プレビューモードを終了するには、デザイナの左上にある［戻る］をクリックします。
3. ［名前を付けて保存］をクリックして、レポートの名前を任意のものに変更し、［レポートの保存］をクリックします。