UI部品 基本編
Excelのピボットテーブルでは、簡単な操作で簡単に月次ごと・科目ごとなどの条件を付けてデータの集計や分析をすることができます。
Excelライクな画面デザインが特徴のForguncyでも、もちろんピボットテーブル機能をサポートしています。
ここでは、担当者ごとの月次売上を示すピボットテーブルからグラフを生成する方法を解説します。
このグラフはピボットテーブルに表示されるデータと連動するので、担当者別や支店別のグラフに表示を切り替えることも可能です。
1.プロジェクトを確認する
今回の演習で使用するプロジェクトを確認します。
手順1-1.テーブルを確認
ナビゲーションウィンドウから「月次売上」テーブルを確認します。
テーブルには、年月、支店名、担当者名、売上実績の項目が存在しています。
手順1-2.ページを確認
ナビゲーションウィンドウから「月次売上グラフ」ページを開きます。
ページには、手順1-1で確認した月次売上テーブルと紐づけられたリストビューと、支店名が書かれたボタン、担当者名と年月を選択するコンボボックス、コンボボックスの条件をクリアするボタンが配置されています。
リストビューはピボットテーブルのデータソースとしての使用のため、非表示セルに設定されています。
2.ピボットテーブルを作成する
ページにピボットテーブルを作成します。
ピボットテーブルの作成方法については「ピボットテーブルで経費精算データを科目別に集計」の記事で詳しく解説しておりますので、より詳細な手順はそちらをご確認ください。
手順2-1.ピボットテーブルの配置
ページの任意の範囲にピボットテーブル型セルを配置します。
ピボットテーブル設定から、以下のようにデータソースの設定を行います。
| 列 | G3：支店名 N3：担当者 |
| 行 | B3：年月 |
| 値 | T3：売上実績（合計） |
売上実績はデフォルトだと個数になっているため、合計に変更してください。
売上実績（合計）は、フィールドの設定＞表示形式から書式設定で通貨形式の表示に変更しておきます。
設定が完了したら、セルスタイルや行/列の縞模様など見た目に関する設定を任意で行います。
3.グラフの生成
ピボットテーブルからグラフを生成します。
手順2-1で作成したピボットテーブルを選択した状態で、[挿入]タブのグラフから、集合横棒グラフを選択します。
ページにグラフが生成されました。
グラフのサイズや位置は自由に変更して構いません。
4.ピボットテーブルの表示データを絞り込む
Forguncyのピボットテーブルに表示されるデータはリストビューを基にしています。
そのため、リストビューにクエリーを設定することで、ピボットテーブルやそのグラフに反映するデータを絞り込むことができます。
手順4-1.表示する店舗を指定するボタンの設定
東京支店ボタンを選択し、右ペインのセル型タブからコマンドをクリックします。
コマンドウィンドウが開くのでクエリーコマンドを追加し下記のように設定します。
- 対象テーブル：月次売上
| フィールド | [支店名] |
| 条件 | =(等しい) |
| 値 | 東京支店 |
OKボタンを押してコマンドウィンドウを閉じます。
同様に、大阪支店ボタンと九州支店ボタンにも下記のようにクエリーコマンドの設定を行います。
【大阪支店ボタン】
- 対象テーブル：月次売上
| フィールド | [支店名] |
| 条件 | =(等しい) |
| 値 | 大阪支店 |
【九州支店ボタン】
- 対象テーブル：月次売上
| フィールド | [支店名] |
| 条件 | =(等しい) |
| 値 | 九州支店 |
全店舗ボタンは、押下した時にどの店舗も選択されていない＝クエリーの設定が無い状態にします。
そのため、クエリーコマンドは設定しますが、クエリーの条件は設定せず、下図のような状態でOKボタンを押下し実装を完了します。
手順4-2.表示する担当者や年月を指定するコンボボックスの設定
担当者と年月を選択するコンボボックスも、クエリーコマンドでデータを絞り込めるようにします。
担当者指定コンボボックスを選択し、右ペインのセル型タブからコマンドをクリックするとコマンドウィンドウが開きます。
クエリーコマンドを追加し下記のように設定します。
- 対象テーブル：月次売上
| And/Or | フィールド | 条件 | 値 |
|---|---|---|---|
| ─ | 担当者 | =(等しい) | =G10 |
| And | 年月 | =(等しい) | =V10 |
同様に、年月コンボボックスにも下記のようにクエリーコマンドを設定します。
- 対象テーブル：月次売上
| And/Or | フィールド | 条件 | 値 |
|---|---|---|---|
| ─ | 年月 | =(等しい) | =V10 |
| And | 担当者 | =(等しい) | =G10 |
同じ行にあるクリアボタンには、コンボボックスの値をクリアする処理を設定します。
ボタンにセルプロパティの設定コマンドを追加し下記のように設定をします。
| 対象セル | プロパティの種類 | 設定値 |
|---|---|---|
| G10 | 値 | %Null% |
| V10 | 値 | %Null% |
これで設定は完了です。
5.デバッグを実行
これでページが完成したので、プロジェクトをデバッグ実行します。
手順5-1.デバッグを実行する
リボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。
作成したページがブラウザで表示されます。
ボタンを押したりコンボボックスの値を変更したりすると、ピボットテーブルやグラフが自動で切り替わることが確認できます。
6. Forguncyのピボットテーブルについてもっと知る
Forguncyの開発スタートガイドやオンラインヘルプでは、今回使用したピボットテーブルについてより詳しくご紹介しています。
こちらもぜひご活用ください。
