ドリルスルーレポート
概要
ドリルスルーレポートでは、パラメータ化されたリンクをクリックして、一連のレポートを前後に移動できます。ドリルスルーリンク機能を使用すると、項目の集計値を表示するメインレポートと特定の項目の詳細を提供するサブレポート間を移動できます。ActiveReportsJSでは、「Jump to Report」アクションを使用することで、ドリルスルーリンクを作成できます。
このチュートリアルでは、ドリルスルー付きチャートを使った売上レポートを作成する手順を説明します。
- 新しいレポートを作成する
- レポートをOData API エンドポイントにバインドする
- ODataの$selectおよび$filterクエリーオプションを使用して、取得するデータの量を減らす
- 折れ線グラフと積層縦棒グラフを作成する
- レポートエクスプローラを使用して、レポートアイテムの階層を移動する
- Lookup関数を使用して複数のデータセットからデータを表示する
- メインレポートとサブレポート（詳細レポート）間を移動するようにパラメータ化されたドリルスルーリンクを設定する
- レポートビューワで［ゲラモード］と［戻る］機能を使用する
前提条件
次の内容は、デザイナアプリを使用することを前提としています。また、データソースとして利用するGrapeCity Data Serviceにアクセスするには、インターネット接続環境が必要です。
新しいレポートを作成する
デザイナアプリにて、［ファイル］メニューをクリックし、［RDLレポート］を選択して、新しいレポートを作成します。デザイン面の周囲にあるグレーの領域をクリックし、表示されるより、［余白］セクションの［スタイル］に「狭い」を設定し、余白を設定します。
新しいレポートを作成する方法
データを連結する
データ連結は、レポートと表示されるレポートのデータの間に接続を確立します。このチュートリアルでは、Contosoという架空の組織の販売データを含むGrapeCity Demo OData APIを使用します。
データソースを追加する
データベースに接続するには、Contoso OData APIのルートURL（https://demodata-jp.grapecity.com/contoso/odata/v1）を使用できます。その中に、/DimCustomers、/DimStores、/DimProductsなどのエンドポイントで表示される複数のテーブルがあります。このようなデータベースに接続するためのレポートデータソースを作成するには、次の手順を実行します。
- データタブを開き、［データソース］の横の［+ 追加］アイコンをクリックします。
- ［データソースの編集］ダイアログで、［名前］フィールドに「Contoso」と入力し、［エンドポイント］フィールドに「https://demodata-jp.grapecity.com/contoso/odata/v1」と入力します。
- ［変更を保存］ボタンをクリックします。
データソースを追加する方法
データセットを追加する
データセットは、データソースの1つ以上のエンドポイントを表します。ドリルスルーリンクを使った売上レポートに対しては、上記で追加したContosoデータソースの/DimChannelsおよび/FactSalesのエンドポイントからデータにアクセスする必要があります。
以下の手順に従って、Channelsデータセットを追加します。
- ［データ］タブをクリックして、「Contoso」データソースの横の［+ 追加］アイコンをクリックします。
- ［新規データセット］ダイアログで、［名前］フィールドに「Channels」と入力し、［Uri/パス］フィールドに「/DimChannels」と入力し、［JSONパス］フィールドに「$.value.*」と入力します。
- デフォルトでは、各「Channel」レコードには7個のフィールドが含まれているが、すべてのフィールドが必要ではありません。以下のように、クエリパラメータを使用してODataの $selectクエリーオプションを適用することで、取得されるフィールドを制限します。
- ［パラメータ］セクションの右側にある［+ 項目追加］アイコンをクリックします。
- 新しく追加された［パラメータ］フィールドに「$select」と入力します。
- ［値］フィールドに、「ChannelKey, ChannelName」と入力します。
- ［検証］ボタンをクリックします。
- ［データベースフィールド］セクションに［2項目］のテキストが表示されていることを確認します。
- ［変更を保存］ボタンをクリックします。
Channelsデータセットを追加する方法
次に、Salesデータセットを追加します。
- ［データ］タブをクリックして、「Contoso」データソースの横の［+ 追加］アイコンをクリックします。
- ［新規データセット］ダイアログで、［名前］フィールドに「Sales」と入力し、［Uri/パス］フィールドに「/FactSales」と入力し、［JSONパス］フィールドに「$.value.*」と入力します。
- デフォルトでは、各「FactSales」レコードには19個のフィールドが含まれているが、すべてのフィールドが必要ではありません。以下のように、クエリパラメータを使用してODataの$selectクエリーオプションを適用することで、取得されるフィールドを制限します。
- ［パラメータ］セクションの右側にある［+ 項目追加］アイコンをクリックします。
- 新しく追加された［パラメータ］フィールドに「$select」と入力します。
- ［値］フィールドに、「DateKey, ChannelKey, SalesAmount」と入力します。
- ［検証］ボタンをクリックします。
- ［データベースフィールド］セクションに［3項目］のテキストが表示されていることを確認します。
- ［変更を保存］ボタンをクリックします。
レポートテンプレートを保存する
作成したレポートテンプレートは、メインレポートとサブレポートの両方を作成するために使用します。したがって、このテンプレートを2つのファイルに保存します。
- デザイナアプリの［ファイル］メニューを開き、サイドバーの［名前を付けて保存］をクリックし、選択したディレクトリに「DrillThroughMainReport.rdlx-json」という名前でレポートを保存します。
- この操作を繰り返して、同じディレクトリに「DrillThroughSubReport.rdlx-json」という名前でレポートテンプレートを保存します。
レポートテンプレートを保存する方法
サブレポートのパラメータを追加する
メインレポートとサブレポート間のドリルスルーリンクには、次の2つのプロパティがあります。
- サブレポートの名前
- サブレポートのパラメータ値のコレクション
サブレポートは、これらのパラメータ値を受け取り、視覚化されたデータをフィルタします。
次は、「DrillThroughSubReport.rdlx-json」レポートに表示されるデータをフィルタする2つのパラメータを追加します。
- ［データ］タブをクリックして、パラメータセクションの横の［+ 追加］アイコンをクリックします。
- ［名前］フィールドに「SalesYear」と入力します。
- ［データタイプ］フィールドに「Integer」を選択します。
- ［非表示］プロパティを「はい」に設定し、パラメータ入力が表示されないようにします。
- ［既定値］セクションで、［値を直接入力］タブを選択し、［値］プロパティの右側にあるリストアイコンをクリックし、［+ 項目の追加］］ボタンをクリックし、新しく追加されたフィールドに「2007」と入力します。
SalesYearパラメータを追加する方法
同様に、ChannelKeyパラメータを追加する
- ［データ］タブの上部にある［←］アイコンをクリックし、［パラメータの編集］を終了します。
- ［パラメータ］の横の［+ 追加］アイコンをクリックします。
- ［名前］フィールドに「ChannelKey」と入力します。
- ［データタイプ］フィールドに「Integer」を選択します。
- ［非表示］プロパティを「はい」に設定し、パラメータ入力が表示されないようにします。
- ［既定値］セクションで、［値を直接入力］タブを選択し、［値］プロパティの右側にあるリストアイコンをクリックし、［+ 項目の追加］］ボタンをクリックし、新しく追加されたフィールドに「2」と入力します。
サブレポートのデータセットを変更する
「DrillThroughSubReport.rdlx-json」レポートは、指定された販売年とチャネルに対して月間売上高を表示します。したがって、クエリパラメータに$filterオプションを追加して、Salesデータセットを変更します。
- ［データ］タブの上部にある［←］アイコンをクリックし、［パラメータの編集］を終了します。
- ［Sales］データセットの横の［データセットの編集］アイコンをクリックします。
- ［パラメータ］セクションの右側にある［+ 項目追加］アイコンをクリックします。
- 新しく追加された［パラメータ］フィールドに「$filter」と入力します。
- ［値］フィールドに、「ChannelKey+eq+{@ChannelKey}+and+Year(DateKey)+eq+{@SalesYear}」と入力します。
- ［検証］ボタンをクリックします。
- 表示される［パラメータ値］プロンプトダイアログでは、［@ChannelKey］フィールドに「2」と入力し、［@SalesYear］フィールドに「2007」と入力して、［保存して実行］ボタンをクリックします。
- ［データベースフィールド］セクションに［3項目］のテキストが表示されていることを確認します。
折れ線グラフを追加する
月間売上高を表示するには、折れ線グラフを使用します。
- ツールボックスからChartをドラッグ＆ドロップしてページの左上隅に配置します。
- プロパティに移動します。
- ［プロットテンプレート］プロパティの隣にあるドロップダウンリストから［折れ線］を選択します。［プロパティ］ウィンドウには、チャートプロットのプロパティが自動的に表示されます。
折れ線グラフを追加する方法
折れ線グラフのプロットを構成する
プロットのプロパティは、グラフ内で実際のデータがどのように視覚化されるかを定義します。折れ線グラフのプロットを構成するには、次の手順を実行します。
- ［値］プロパティの右側にあるリストアイコンをクリックします。
- ［+ 項目の追加］ボタンをクリックし、新しく追加された値の右側の歯車アイコンを使用して、［値プロパティ］を開きます。
- ［Value］の右側にあるリストアイコンをクリックします。
- 追加された値の右側のアイコンをクリックし、ドロップダウンリストから「SalesAmount」を選択します。
- ［集計］プロパティに「Sum」を選択します。
プロットを構成する方法
同様に、プロットカテゴリを構成します。
- ［値プロパティ］の横にある［←］アイコンをクリックし、［プロット］に戻ります。
- ［エンコーディング］セクションの［カテゴリ］の右側にあるリストアイコンをクリックします。
- 追加されたフィールドに「{MonthName(Month(DateKey))}」と入力します。
- ［カテゴリの並べ替えの式］に「{Month(DateKey)}」と入力します。
- ［カテゴリの並べ替えの順序］に「Ascending」と入力します。
これにより、プロットには多くのDateKey値から抽出された各月の売上高の合計が表示されます。1月から12月まで、月は自然な順序で表示されます。
次に、線の外観を構成します。
- ［スタイル］セクションまでスクロールし、［線の色］を「Black」に、［線の幅］を「2pt」に設定します。
- ［シンボル］セクションで、［シンボルの形状］プロパティに「Dot」、［背景色］プロパティに「White」、［スタイル］プロパティに「Solid」を選択します。
これで、レポートをプレビューすると、構成したプロットが線で接続されたドットを使用して月間売上高を表示することを確認できます。
折れ線グラフの外観を構成する
レポートエクスプローラを使用して、レポート内を移動したり、レポート要素のプロパティを読み込んで変更したりすることができます。ツールボックスの［エクスプローラ］アイコンをクリックし、エクスプローラパネルを固定します。レポートアイテムの階層が表示されます。ノードを選択すると、そのプロパティが［プロパティ］ウィンドウに表示されます。［Chart1］をクリックし、［プロパティ］ウィンドウに［幅］プロパティを「7.5in」に、［高さ］プロパティを「6in」に設定します。
グラフ要素のサイズを設定する方法
同様に、［X軸-［プロット 1］］および［Y軸-［プロット 1］］のプロパティを設定します。
X軸-［プロット 1］
| プロパティ | 値 |
|---|---|
| 共通 > タイトル | 空の文字列（デフォルト値をリセットする） |
| 線 > 表示 | いいえ |
| ラベル > 色 | #1a1a1a |
| ラベル > ラベルの角度 | -45 |
| 主グリッド線 > グリッド線を表示 | はい |
| 主グリッド線 > 幅 | 0.25pt |
| 主グリッド線 > 色 | #ccc |
Y軸-［プロット 1］
| プロパティ | 値 |
|---|---|
| 共通 > タイトル | 空の文字列（デフォルト値をリセットする） |
| 線 > 表示 | いいえ |
| ラベル > 色 | #1a1a1a |
| ラベル > 表示形式 | c2（ドロップダウンリストから通貨を選択する） |
| 主グリッド線 > グリッド線を表示 | はい |
| 主グリッド線 > 幅 | 0.25pt |
| 主グリッド線 > 色 | Gainsboro |
| 主グリッド線 > 主グリッド線の間隔 | 20000 |
グラフは設計時にゆがんで表示されるが、レポート出力をプレビューすると、正しく表示されます。
折れ線グラフのヘッダを構成する
グラフのヘッダには、販売チャネルと年に関する情報を表示します。これらの値はレポートパラメータとして利用できるため、「{@SalesYear}年の月間売上高（{Lookup(@ChannelKey, ChannelKey, ChannelName, "Channels")}）」式を使用します。ただし「ChannelKey」は整数値であり、レポートには実際の販売チャネル名を表示する必要があります。Lookup関数を使用して、ChannelKeyによって販売チャネル名を表示します。
- レポートエクスプローラでは、［Chart1］ > ［ヘッダ］の順に選択します。
- ［共通］セクションの［キャプション］プロパティを「{@SalesYear}年の月間売上高（{Lookup(@ChannelKey, ChannelKey, ChannelName, "Channels")}）」に設定します。Lookup関数は、最初の引数としてChannelKeyパラメータの値を受け取り、Channelsデータセットで同じChannelKeyの値を持つ行を検索し、対応するChannelNameの値を返します。
- また、［テキスト］セクションの［色］プロパティを「#3da7a8」に、［サイズ］プロパティを「22pt」に、［太さ］プロパティを「Bold」に設定します。
レポートをプレビューすると、グラフのヘッダに「2007年の月間売上高（Online）」というテキストが表示されます。
これで、ドリルスルーリンクを使ったサブレポートが作成されます。デザイン面に戻り、［保存］ボタンをクリックして、進行状況を保存します。
次に、［ファイル］ > ［開く］の順に選択し、以前に保存した「DrillThroughMainReport.rdlx-json」レポートを開きます。
積層縦棒グラフを追加し、そのプロット、外観、およびヘッダを構成する
ドリルスルーのメインレポートでは、積層縦棒グラフを使用して、年間売上高のデータを表示します。
- ツールボックスからChartをドラッグ＆ドロップしてページの左上隅に配置します。
- ［プロパティ］ウィンドウでは、［プロットテンプレート］プロパティの隣にあるドロップダウンリストから［積層縦棒］を選択します。［プロパティ］ウィンドウには、チャートプロットのプロパティが自動的に表示されます。
- ［値］プロパティの右側にあるリストアイコンをクリックします。
- ［+ 項目の追加］ボタンをクリックし、新しく追加された値の右側の歯車アイコンを使用して、［値プロパティ］を開きます。
- ［Value］の右側にあるリストアイコンをクリックします。
- 追加された値の右側のアイコンをクリックし、ドロップダウンリストから「SalesAmount」を選択します。
- ［集計］プロパティに「Sum」を選択します。
- ［値プロパティ］の横にある［←］アイコンをクリックし、［プロット］に戻ります。
- ［エンコーディング］セクションの［カテゴリ］の右側にあるリストアイコンをクリックします。
- 追加されたフィールドに「{Year(DateKey)}」と入力します。
- ［カテゴリの並べ替えの式］に「{Year(DateKey)}」と入力します。
- ［カテゴリの並べ替えの順序］に「Ascending」と入力します。
「折れ線グラフの外観を構成する」セクションで説明したように、レポートエクスプローラを使用して［Chart1］の次のプロパティを設定します。
| プロパティ | 値 |
|---|---|
| 位置とサイズ > 幅 | 7.5in |
| 位置とサイズ > 高さ | 7.5in |
X軸-［プロット 1］の次のプロパティを設定します。
| プロパティ | 値 |
|---|---|
| 共通 > タイトル | 空の文字列（デフォルト値をリセットする） |
| 線 > 表示 | いいえ |
Y軸-［プロット 1］の次のプロパティを設定します。
| プロパティ | 値 |
|---|---|
| 共通 > タイトル | 空の文字列（デフォルト値をリセットする） |
| 線 > 表示 | いいえ |
| ラベル > 色 | #3c3c3c |
| ラベル > 表示形式 | c2（ドロップダウンリストから通貨を選択する） |
| 主グリッド線 > グリッド線を表示 | はい |
| 主グリッド線 > 幅 | 0.25pt |
| 主グリッド線 > スタイル | Dashed |
| 主グリッド線 > 色 | #ccc |
| 主グリッド線 > 主グリッド線の間隔 | 50000 |
ヘッダの次のプロパティを設定します。
| プロパティ | 値 |
|---|---|
| 共通 > キャプション | チャネル別の年間売上高 |
| テキスト > サイズ | 20pt |
| テキスト > 太さ | Bold |
積層縦棒グラフの詳細を構成する
これで、レポートをプレビュすると、各年の売上の合計が表示されます。しかし、各列を販売チャネル間で分割し、凡例を表示する必要があります。そのために、詳細エンコーディング、凡例エンコーディング、および凡例の構成を使用します。
- デザイン面に戻り、［エクスプローラ］で［プロット-プロット 1］を選択します。
- ［エンコーディング］セクションの［詳細］の右側にあるリストアイコンをクリックします。
- ［+ 項目の追加］ボタンをクリックし、新しく追加された値の右側の歯車アイコンを使用して、［詳細プロパティ］を開きます。
- ［値］の右側にあるリストアイコンをクリックします。
- 追加された値の右側のアイコンをクリックし、ドロップダウンリストから「ChannelKey」を選択します。
- ［詳細プロパティ］の横にある［←］アイコンをクリックし、［プロット］に戻ります。
- ［エンコーディング］セクションの［凡例］の右側にあるリストアイコンをクリックします。
- ［+ 項目の追加］ボタンをクリックし、新しく追加されたフィールドに「{Lookup(ChannelKey, ChannelKey, ChannelName, "Channels")}」と入力します。
- ［エクスプローラ］では、［凡例-凡例］を選択します。
- ［レイアウト］セクションの［向き］プロパティを「Horizontal」に、［位置］プロパティを「Top」に設定します。
プロットラベルとツールチップを表示する
これで、レポートをプレビューすると、各列が販売チャネルに対応する4つの色付きの部分に分割され、凡例が色をチャネル名と一致させます。データ視覚化を改善するには、プロットラベルとツールチップの外観を構成します。
- デザイン面に戻り、［エクスプローラ］で［プロット-プロット 1］を選択します。
- ［ツールチップのテンプレート］プロパティの横にあるドロップダウンリストから「Color Field Value」を選択します。
- ［ラベルのテキスト］セクションの［テンプレート］プロパティの横のアイコンをクリックし、［式］を選択します。式エディタが表示されます。［式］テキスト領域に「{valueField.value:C2}」と入力し、［保存］ボタンをクリックします。
- ［ラベルのテキスト］セクションの［位置］プロパティを「Center」に設定します。
プロットラベルとツールチップを構成する方法
レポートをプレビューすると、グラフの列に各チャネルと年の売上高が表示され、マウスを列の上に移動するときにチャネル名がツールチップに表示されます。
ドリルスルーリンクを構成する
最後に、ドリルスルーリンクを設定して、メインレポートをサブレポートにリンクさせます。
- デザイン面に戻り、［エクスプローラ］で［プロット-プロット 1］を選択します。
- ［アクション］セクションの［種類］プロパティを「Jump to Report」に設定します。
- ［レポートに移動］の横にあるドロップダウンリストから「DrillThroughSubReport.rdlx-json」を選択します。
- ［パラメータ］プロパティの右側にあるリストアイコンをクリックします。
- ［+ 項目の追加］ボタンをクリックし、新しく追加された値の右側の歯車アイコンを使用して、［パラメータのプロパティ］を開きます。
- ［名前］フィールドに「ChannelKey」と入力し、［値］の横にあるドロップダウンリストから「ChannelKey」を選択します。
- ［パラメータのプロパティ］の横にある［←］アイコンをクリックし、［プロット］に戻ります。
- 同様に、「SalesYear」という名前、および「{Year(DateKey)}」という値で別のパラメータを追加します。
これで、レポートをプレビューし、任意の列をクリックすると、ドリルスルーリンクによって選択した販売年とチャネルの詳細データを含むサブレポートが開かれます。ツールバーで［戻る］ボタンをクリックして戻ることができます。また、ツールバーの右端にある［ゲラモード］ボタンをクリックできます。このボタンは、ビューワモードを切り替えて、ドリルスルーレポートの読み取りに適したページなしの出力を表示します。