エクセルでできるWEBアプリ　クラウドシートⅡ開発手順サイト

グラフは、作成するグラフ用のレポート(DBテーブル)を用意する必要があります。
必要なレポートはクエリやSQL文で作成したものも使用できます。
ここではSQL文でレポートを作成し円グラフを作成しています。

■ グラフ画面の完成図

今回は得意先ごとの金額別の「円グラフ」を作成します。

1. グラフ用一覧画面のレポートを作成します
　1-1.　plsパネルの何もない箇所で右クリックします
　　　　「レポート新規登録」をクリックし、レポート名「UriageGraph」とします
　

2. レポートにテーブルを追加します
　2-1.　レポート「UriageGraph」の上で右クリックします
　2-2.　メニューから「テーブル追加」をクリックします
　2-3.　表示されたDB一覧からAccess(*.mdb)を選択し、次へをクリックします
　2-4.　開いたフォルダからDB「Uriage2DB.mdb」を選択し、開くをクリックします
　2-5.　テーブル名から「Uriage2」を選択し、右側にあるボタン「SQL作成」をクリックします
　　

3. SQL文を修正します
　3-1.　SQL文指定パネルが開きます
　　

　3-2.　SQL文「SELECT * FROM Uriage2」を以下に修正し、実行をクリックします
　　
　　　　レポートが作成されます
　　

4. グラフ画面をデザインします 　
　4-1.　エクセル「Uriage2.xlsb」を選択し、シートを追加します
　4-2.　追加したシート名を「Uriage2Graph」に修正します
　4-3.　グラフ画面のデザインを画像を参考に作成します
　　　　赤点線の印刷範囲はブラウザに表示する範囲です。忘れずに設定しましょう
　
　4-4.　ブラウザで表示ができる設定をします。デザインの上で右クリックします
　4-5.　「XCuteナビゲーション」→「ひな型ナビ」→「ＯＫ」→「ＯＫ」の順にクリックします
　4-6.　もう1度「XCuteナビゲーション」→「ひな型ナビ」→「ＯＫ」→「ＯＫ」→「ＯＫ」の順にクリックします

5. ひな型の設定をします
　　※操作詳細は応用操作2のダウンロードを参照ください
　5-1.　レポート「UriageGraph」のテーブル「Uriage2」を右クリックします
　5-2.　表示されたメニューから「ひな形の設定」をクリックします
　5-3.　下図の赤枠を設定します
　

6. 作成したグラフ画面とレポート(DBテーブル)をマッピングします
　6-1.　plsパネルのセル位置に下図の赤枠を設定します
　　※この操作でグラフ画面の項目とDB項目のマッピングが設定されます
　

7. グラフを作成します
　7-1.　グラフ作成用に一時的にダミーデータを入力します
　　　　　※図を参考にお取引先名と売上合計を入力します
　7-2.　ダミーデータでグラフ作成します
　　　　　※グラフのデザインやサイズを調整します。この操作はエクセルの操作になります

　　　　※グラフが作成できたらダミーデータは削除します

8. グラフ画面に検索画面に戻るリンク設定をします
　　※グラフ作成は7までの操作で完成です。最後に検索画面とグラフ画面をリンクさせます　　
　8-1.　シートUriageGraphのセルR10C6を右クリックします
　8-2.　「XCuteナビゲーション」→「リンクタグ<A href'..'>」→「ＯＫ」の順にクリックします
　8-3.　セルR10C13にリンクタグがセットされます。下図を参考に赤字の変更後に修正します

9. 売上検索画面にグラフ画面を表示するリンク設定をします
　9-1.　リンクを表示するセルR10C14を右クリックします
　9-2.　「XCuteナビゲーション」→「リンクタグ<A href'..'>」→「ＯＫ」の順にクリックします
　9-3.　セルR10C25にリンクタグがセットされます。下図を参考に赤字の変更後に修正します

10. 動作確認をしましょう