チャートを使ったシンプルなレポート

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

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

レポートにデータをバインドする

1. 新しいレポートを作成します。デフォルトでは、空白の RDLレポート が作成されます。

2. データソースに接続します。

   1. ［データ］タブをクリックして、［データソース］の［+ 追加］をクリックします。

   2. ［データソースの編集］ダイアログでは、次のURLをリモートJSONプロバイダの［エンドポイント］に指定します。

   https://demodata-jp.grapecity.com/northwind/odata/v1/
   

   3. ［変更を保存］ボタンをクリックします。

3. データセットを追加します。

   1. 追加したデータソースの［新規データセット］をクリックします。

   2. ［新規データセット］ダイアログでは、Uri/パスにリソース名を「Products」として入力します。

   3. JSONパスに「$.value[*]」を入力します。

   4. パラメータプロパティで、項目の追加をクリックし、次のパラメータと値を入力して、別のリソース「Category」からフィールドを抽出します。

      • パラメータ=$expand , 値=Category
        
        これにより、「Products」および「Category」リソースのフィールドが単一のデータセットに結合されます。

   5. フィールドを取得するには、［検証］ボタンをクリックしてクエリを検証します。その後、［変更を保存］ボタンをクリックします。
      データソースへの接続とデータセットの追加については、データの連結を参照してください。

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

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

プロットを定義する

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

1. チャートを選択した状態で、［プロパティ］タブから、［プロット］プロパティの横にある［項目の表示］をクリックして、［プロット 1］が既に設定されていることを確認します。

2. ［+ 項目の追加］をクリックして、もう1つのプロットを追加し、［プロット 2］として設定します。これで、［プロット 1］と［プロット 2］のプロットがチャートに設定されます。

次のように、プロットのプロパティを設定しましょう。

3. ［エクスプローラ］をクリックして、［プロット-プロット 1］を選択し、［プロパティ］タブを表示します。

4. ［共通］セクションの［値］プロパティの隣にある［項目の表示］をクリックして、［+ 項目の追加］を選択します。

5. 表示される［値 0］の隣にあるをクリックして、［値プロパティ］を表示します。

6. ［Value］プロパティの隣にある［項目の表示］をクリックして、［+ 項目の追加］を選択します。

7. 表示されるボックスの隣にあるボタンをクリックしてフィールドのリストを表示し、「UnitsInStock」を選択します。
   

   UnitsInStockフィールドは、データフィールドの下に表示されるフィールドボックスに表示されます。

8. ［エクスプローラ］から［プロット-プロット 1］を選択して、［エンコーディング］セクションの［カテゴリ］プロパティの隣にある［項目の表示］をクリックし、［+ 項目の追加］を選択します。

9. 表示されるボックスの隣にあるボタンをクリックしてフィールドのリストを表示し、「Category.CategoryName」を選択します。

10. チャートに凡例を表示するには、［エンコーディング］セクションの［凡例に値の名前を表示］プロパティを「はい」に設定します。

11. メニューバーから［Chart］タブをクリックします。

12. ［プロットのテンプレートの設定］の隣にあるドロップダウンから「折れ線」を選択します。
    

13. 次の画像に示すように、［プロット-プロット 2］の［Value］プロパティを「UnitPrice」に設定します。
    

14. ［エンコーディング］セクションの［カテゴリ］プロパティの隣にある［項目の表示］をクリックして、［+ 項目の追加］を選択します。

15. 表示されるボックスの隣にあるボタンをクリックしてフィールドのリストを表示し、「Category.CategoryName」を選択します。

16. チャートに凡例を表示するには、［エンコーディング］セクションの［凡例に値の名前を表示］プロパティを「はい」に設定します。

17. メニューバーから［Chart］タブをクリックします。

18. ［プロットのテンプレートの設定］の隣にあるドロップダウンから「縦棒」を選択します。

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

1. ［エクスプローラ］をクリックし、［Y軸-［プロット 1］］を選択します。

2. ［プロパティ］タブをクリックし、［共通］セクションの［タイトル］プロパティを「在庫数量」に設定します。

3. ［Y軸-［プロット 2］］を選択して、［共通］セクションの［タイトル］プロパティを「単価」に設定します。

4. ［プロパティ］タブより、［ラベル］セクションの［表示形式］プロパティを「通貨（桁数: 0）」に設定します。

5. ［エクスプローラ］より、［X軸-［プロット 1］］を選択します。

6. ［プロパティ］タブより、［共通］セクションの［タイトル］プロパティを「カテゴリ名」に設定します。

7. ［プロット］プロパティの隣にある［項目の表示］をクリックし、［+ 項目の追加］を選択して、次の画像のとおり設定します。
   

8. ［ラベル］セクションの［ラベルの角度］プロパティを「45」に設定します。

9. ［エクスプローラ］より、［グローバル凡例］を選択して、［共通］セクションの［位置］プロパティを「Top」に設定します。

タイトルを追加する

チャートとX軸、Y軸にタイトルを追加しましょう。

1. ［エクスプローラ］をクリックして、Chart1（名前を変更した場合はそのChartの名前）の下にある［ヘッダ］を選択します。

   

2. ［プロパティ］タブをクリックし、［共通］セクションの［キャプション］プロパティを「カテゴリ別製品」に変更します。

   

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

メモ:必要に応じて、レポートに配置する各コントロールのサイズや位置を調整してください。

1. テキストセクションのサイズを使用して、チャートタイトルのテキストを設定します。

2. デザイナーの上部にある［Chart］タブのを選択し、［グラフの色パレットの設定］の隣にあるドロップダウンから「Blue」を選択して、チャートに適した色パレットを選択します。

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

1. ［プレビュー］をクリックしてレポートの最終結果を表示します。

2. レビューモードを終了するには、デザイナの左上にある［戻る］ボタンをクリックします。

3. ［名前を付けて保存］をクリックして、レポートの名前を任意のものに変更し、［保存］をクリックします。