グラフのドリルダウンで売上データの内訳を確認する

UI部品　基本編

売上データをグラフで確認しても、「どこで伸びているのか」「何が要因なのか」までは見えないことがあります。
そのようなとき、内訳を順にたどって中身を確認できれば、売上の構造をより具体的に把握できます。
本記事では、グラフのドリルダウンを活用して、売上の内訳を段階的に確認していく方法を紹介します。

1.プロジェクトを確認する

今回の演習で使用するプロジェクトを確認します。

手順1-1.テーブルを確認

プロジェクトには既にテーブルと、そのテーブルを基にしたビューが内蔵されています。
今回はその売上テーブルとV_カテゴリ別売上を使用します。

ビューの作成方法については下記のページにて解説していますので、そちらを参考にしてください。

＞開発スタートガイド – クエリを使ってビューを定義する

＞Forguncyヘルプ – ビューの作成

手順1-2.ページを確認 

プロジェクトには複数のページが内蔵されています。
「月次売上」ページはV_カテゴリ別売上ビューを使用して、毎月の売り上げとカテゴリごとの割合がわかる積み上げ棒グラフが表示されています。
グラフの下にはコンテナー型セルが配置されており、グラフをクリックするとこのコンテナー型セルの中に「商品別売上割合」ページが表示されます。
また、リストビューが存在する行は今回グラフのデータの基としての利用のみなので、非表示に設定してあります。
「商品別売上割合」ページはほとんど白紙の状態です。
今回の演習を通じて、このページに「月次売上」ページでクリックした年月・カテゴリで抽出した商品ごとの売上割合がわかる円グラフを表示できるよう設定していきます。

2.グラフのクリックイベントを設定する

グラフをクリックした際、クリックした場所に内訳データを表示するには、クリックした場所がどのようなデータを表示しているかを取得する必要があります。
Forguncyではグラフにクリックイベントを設定できます。
今回はそれを使って、クリックした部分の年月とカテゴリのデータを取得します。

手順2-1.グラフデータの確認

クリックイベントを定義する前に、「月次売上」ページの棒グラフに連結設定されているデータを確認します。
棒グラフの上で右クリックし、[データの選択…]をクリックすると、下図のようにデータソースの選択ウィンドウが開きます。

今回は系列に「装置」「消耗品」「部品」の3種類のカテゴリが設定されており、項目にはリストビューの「年月」列のデータが表示されています。

手順2-2.クリックしたエリアの年月データを取得

クリックしたグラフ部分の年月の値を取得する設定を行います。
グラフを右クリックし、[クリックイベント…]をクリックします。
クリックイベントウィンドウが開くので、[新しいコマンド]ボタンを押下しセルプロパティの設定コマンドを追加します。
以下のように設定し、[OK]を押下してウィンドウを閉じます。

設定値でカテゴリーを選択すると、グラフの項目部分の値を取得することができます。
装置、消耗品、部品などの売り上げた商品のカテゴリとは異なることに注意してください。
今回はこの取得した値がA4セルに入るよう設定しています。
デフォルトでは、A4セルには「指定年月のデータをここに表示します」という文言が入っていますが、これを上書きして選択した年月の値が入ります。

手順2-3.クリックしたエリアの商品カテゴリデータを取得

クリックしたグラフ部分の商品カテゴリの値を取得する設定を行います。
手順2-2と同様にグラフを右クリックし、[クリックイベント…]をクリックします。
クリックイベントウィンドウが開くので、[新しいコマンド]ボタンを押下しセルプロパティの設定コマンドを追加します。
以下のように設定し、[OK]を押下してウィンドウを閉じます。

設定値で系列名を選択すると、グラフの系列部分の値を取得することができます。
今回はこの取得した値がN4セルに入るよう設定しています。
デフォルトでは、N4セルには「指定したカテゴリ名をここに表示します」という文言が入っていますが、これを上書きして選択した商品カテゴリの値が入ります。

手順2-4.セルに名前を付ける

手順2-2と手順2-3で取得した年月と商品カテゴリの値は、コンテナー型セル内に表示する「商品別売上割合ページ」に渡す必要があります。
そのためにはこれらのデータが入っているA4セル、N4セルに名前を定義しておかなければなりません。
A4セルを選択した状態で、数式バーの名前ボックスに「yyyymm」と入力し、Enterキーを押下します。

これで、A4セルには「yyyymm」という名前が付けられました。
同様にN4セルを選択し、数式バーの名前ボックスに「category」と入力し名前を付けます。

これで、別のページからもこの2つのセルの値を参照できるようになりました。

3.割合がわかる円グラフを作成する

ページを移動し、「商品別売上割合ページ」を開いてクリックしたグラフエリアの値に基づく円グラフを表示できるよう設定を行います。

手順3-1.クリックしたエリアのデータを取得

「月次売上ページ」でクリックしたグラフエリアの年月、商品のカテゴリデータを受け取れるよう設定を行います。
A1セルとA2セルにそれぞれ数式をセットします。

これで、A1セルとA2セルに「月次売上ページ」でクリックしたグラフエリアの年月、商品のカテゴリデータが入るようになりました。
年月のデータは年と月に分けて参照できるようにしたいので、B3セルとF3セルにそれぞれ年と月を抜きだすための数式を下記のように入力します。

手順3-2.グラフの基となるデータをセット

グラフの基となるデータを表示するリストビューを画面に配置します。
B4セル～AA13セルを選択した状態で、ナビゲーションウィンドウから売上テーブルを選択範囲上にドラッグ＆ドロップします。

データソースの設定ウィンドウが開いたら、表示項目は下図のように[年月][カテゴリ][商品名][売上金額]を設定します。

このままだと売上テーブルのすべてのデータが表示されてしまうため、リストビューのデータに絞り込みを行います。
リストビューを右クリックし、[クエリー条件…]をクリックします。
クエリー条件ウィンドウが開いたら、下記のように条件設定を行います。

設定が完了したら、3行目～14行目は非表示に設定しておきます。
これで、月次売上ページのコンテナー型セルの中にリストビューは表示されないようになります。

手順3-3.円グラフを作成

手順3-2で作成したリストビューから円グラフを生成します。
リストビューを選択した状態で、リボンの[挿入]>[円]から円グラフを選択します。

グラフを右クリックし、[データの選択…]をクリックします。
データソースの選択ウィンドウが開くので、データソースをリストビューに設定します。
[凡例項目（系列）]に売上金額、[横（項目）軸ラベル]は編集ボタンを押下し[軸ラベルの値を取得するリストビューの列]でJ5セルを指定します。

手順3-4.データラベルを設定

円グラフの各項目のパーセンテージが分かるよう、データラベルの表示設定を行います。
リボンの[グラフツール]>[レイアウト]>[ラベル]>[データラベル]>[その他のデータラベルオプション…]を選択します。[表示形式]タブに移動し、分類を「パーセンテージ」にして小数点以下の桁数を「2」に設定し、[OK]でウィンドウを閉じます。

データラベルの書式設定ウィンドウが開くので、データ系列で売上金額が選択されていることを確認します。
[ラベルオプション]タブでラベルの内容から「パーセント」にチェックを入れます。
[表示形式]タブに移動し、分類を「パーセンテージ」にして小数点以下の桁数を「2」に設定し、[OK]でウィンドウを閉じます。

これで設定は完了です。

4.デバッグを実行する

デバッグを行うには、動作確認したいページを開いた状態でリボンの[ホーム]>[デバッグ実行]>[▶]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。

プロジェクトを実行すると、「月次売上」ページが表示されます。
グラフをクリックすると、棒グラフの下にクリックしたエリアの年月、カテゴリに一致する商品別の売上割合が円グラフで表示されます。

Forguncyのグラフについてもっと知る

Forguncyの開発スタートガイドやオンラインヘルプでは、ユーザーがより使いやすいアプリを作成するのに便利なグラフについてより詳しくご紹介しています。
こちらもぜひご活用ください。

＞開発スタートガイド – Forguncyで機能的なUIを作成する

＞Forguncyヘルプ – グラフの作成

＞Forguncyドリル – ピボットテーブルからグラフを作成

＞Forguncyヘルプ – セルの名前定義

＞開発スタートガイド – クエリを使ってビューを定義する

＞Forguncyヘルプ – ビューの作成