一.概要
ダッシュボード作成：大型スクリーン及びモバイル端末展示向けの帳票デザインモードです。ダッシュボードに帳票ブロック、グラフ、ウィジェットといったコンポーネントを挿入することが可能です。前述の部分を絶対レイアウト、自動調整レイアウトなどの方法を通して配置し、自由に組み合わせて使うことができます。
ダッシュボードはビッグデータの可視化、分析などの面において一般帳票より優れています。また、ダッシュボードはウィジェットの部分リフレッシュ、ウィジェット間の連動分析といった機能を備えています。
本マニュアルでは以下のようなダッシュボードを作成します。
二.テンプレートの作成とコンポーネントの配置
1.ダッシュボード新規作成
[ファイル]‐[ダッシュボード新規作成]をクリックします。
空白なキャンバスが表示されます。
下部キャンバスの大きさを調整することができます。入力ボックスの数字を変更し、エンターキーを押すと、キャンバスの大きさの調整は完了です。
既定の大きさは960画素×540画素です。
2.コンポーネント配置
2.1.コンポーネントの配置方法
上部のメニューでコンポーネントを選択し、キャンパスにドラッグ&ドロップできます。(本章ではグラフとウィジェットを使用します。)
グラフとウィジェット部分の右下のをクリックすると、すべてのグラフ、ウィジェットが表示されます。
2.2.コンポーネントをドラッグ&ドロップ
2.2.1.折れ線グラフを配置
グラフ部分の[折れ線グラフ]を選択し、キャンパスにドラッグ&ドロップします。
現在ダッシュボードの方式はレイアウト[自動調整設定]です。デザイナはドロップ位置に基づいて、最も適切な位置でコンポーネントを配置します。
キャンパスにドラッグ&ドロップする際、マウスを押したままにし、デザイナはドロップ位置に基づいて、配置位置を事前に表示させます。下図2のように、青い部分はデザイナが自動的に予測したの配置位置です。
下図2のように、[折れ線グラフ]が全キャンパスを占めています。
2.2.2.円グラフを配置
グラフ部分の[円グラフ]を選択し、キャンパスにドラッグ&ドロップします。
円グラフを折れ線グラフの右側に配置します。
2.2.3.縦棒グラフを配置
グラフ部分の[縦棒グラフ]を選択し、キャンパスにドラッグ&ドロップします。
横棒グラフを折れ線グラフと円グラフの下に配置します。
2.2.4.ボタンを配置
ウィジェッ部分の[ボタン]を選択し、キャンパスにドラッグ&ドロップします。
ボタンウィジェットを折れ線グラフと円グラフの上に配置します。
下図2コンポーネントの大きさを自由に調整することができます。同時に、他のコンポーネントの大きさも自動的に調整します。
2.2.5.コンポーネント設定
配置済みのコンポーネントリストは右側に表示されています。
コンポーネントリストの上に四つのボタンがあります。それぞれの機能は[切り取り]、[コピー]、[貼り付け]、[削除]です。
マウスをコンポーネント名称の上に移動して、コンポーネントのプレビューします。
3.ダッシュボードを保存
上メニューの[保存] をクリックすると、[保存]パネルが表示されます。[OK]をクリックすると、作成したダッシュボードを既定の「帳票作業ディクトリー」に保存することができます。
三.ダッシュボードを作成
前の部分ではグラフやウイジェットといったコンポーネントをキャンパスに配置することについて説明しました。この部分ではグラフのデータソース及びウィジェットスタイルの編集について説明します。
1.データセット新規作成
1.SQL文で以下のデータセット1、2、3を作成します。
SELECT substr(SIGNDATE,1,4) AS year,
SUM(PRICE*QUANTITY) AS total_sales
FROM ORDERS, ORDERSDETAIL, EMPLOYEE
WHERE ORDERS.ORDERID = ORDERSDETAIL.ORDERID
AND ORDERS.EMPID = EMPLOYEE.EMPID
GROUP BY year
ORDER BY year
|
プレビューで確認します。このデータセットは年間売上高を示しています。
SELECT EMPNAME, SUBSTR(SIGNDATE,1,4) AS year,
COUNT(ORDERS.EMPID) AS total_orders
FROM ORDERS,EMPLOYEE
WHERE ORDERS.EMPID = EMPLOYEE.EMPID
GROUP BY EMPNAME, year
ORDER BY total_orders DESC
|
プレビューで確認します。このデータセットは販売員の年間オーダー数を降順で示しています。
SELECT EMPNAME, SUBSTR(SIGNDATE,1,4) AS year,
SUM(price*quantity) AS total_sales
FROM ORDERS, ORDERSDETAIL, EMPLOYEE
WHERE ORDERS.ORDERID = ORDERSDETAIL.ORDERID AND ORDERS.EMPID = EMPLOYEE.EMPID
GROUP BY EMPNAME, year
ORDER BY total_sales DESC
|
プレビューで確認します。このデータセットは販売員の年間販売額を降順で示しています。
2.グラフデータソースを設定
異なった種類のグラフはそれぞれならではの機能を有しており、様々な視点からデータ及び情報を示すことができます。以下は前述のデータセット、対応のグラフタイプ及びグラフの目的です。
| グラフタイプ | 表示目的 | 対応のデータセット |
|---|
折れ線グラフ | 変化の趨勢 | total sales |
円グラフ | 各部分の割合 | orders by employee |
棒グラフ | データの比較 | sales by employee |
2.1 折れ線グラフ
1.ここでは前章で作成したダッシュボードを使用します。マウスのカーソルを折れ線グラフの上に移動し、[編集]をクリックします。右側では、グラフ編集パネルが表示されます。[データ]タグを選択します。
2.[データセット]を「totals sales」と設定し、分類を[year]と設定します。
3.[系列名を使用]を[フィールド名使用]と設定します。
4.[フィールド名]を[total_sales]に設定し、系列名を「total sales」に設定します。
5.データ列[total_sales]のすべての値は同じ系列名「total sales」を持っています。
2.2 円グラフ
1.マウスのカーソルを円グラフの上に移動し、[編集]をクリックします。
2.右側パネルで[データ]タグを選択します。[データセット]を「orders by employee」と設定し、分類を[year]と設定します。
3.系列名を使用を[フィールド値使用]と設定し、[フィールド名]を[total_sales]に設定し、系列名を「EMPNAME」に設定し、系列値を「total_orders」に設定します。
4.[データフィルタ]の[系列]タグを選択します。[先頭のデータのみを使用]にチェックを入れます。[レコード数]を「5」に設定します。[余りを「その他」にまとめる]にチェックを入れます。
2.3 棒グラフ
1.マウスのカーソルを円グラフの上に移動し、[編集]をクリックします。
2.右側パネルで、[データ]タグを選択します。[データセット]を「sales by employee」に設定し、分類を「EMPNAME」に設定します。
3.[系列名を使用]を「フィールド値使用」、系列名を「year」、系列値を「total_sales」、集計タイプを「なし」に設定します。
4.データフィルタの[分類]タグを選択します。[選択のデータのみを使用]にチェックを入れます。レコード数を「20」に設定します。[余りを「その他」にまとめる]のチェックを外します。
3.ウィジェットスタイルを編集
1.ボタンウィジェットをクリックします。右側パネルの[属性]タグでウィジェットのスタイルを編集できます。
2.ボタン名をダッシュボードの名称「販売状況」と設定します。この変更は直ちに左側のキャンペーンに反映されます。
4.ダッシュボードをプレビュー
メニューのプレビューボタンをクリックし、ダッシュボードをプレビューします。
2.各グラフは既定のスタイルがあります。グラフデータソースはグラフで表示されます。ブラウザでグラフとインタラクションできます。
四.ダッシュボードスタイル最適化
前の部分では、グラフのデータソース及びコンポネットスタイルの編集について説明しました。今までの説明を参考として、インタラクティブなダッシュボードの作成は実現できます。この部分では、今までの操作を踏まえて、グラフ、ウィジェット、キャンパスのスタイル変更について説明し、よりきれいなダッシュボードを作成します。
1.グラフスタイルを変更
1.1 折れ線グラフのスタイル変更
1.マウスのカーソルを折れ線グラフの上に移動し、[編集]をクリックします。右側では、グラフ編集パネルが表示されます。[スタイル]タグをクリックします。
2.[スタイル]タグには、[スタイル]、[凡例]、[ラベル]、[系列]、[座標軸]、[データシート]、[背景]、[ヒント]があります。
注意：グラフの種類によって、[スタイル]タグの内容も異なっています。例えば 円グラフの[座標軸]を設定することはできません。
3.[タイトル]をクリックします。[タイトル表示]にチェックを入れます。下図のように、テキストの後ろの入力のボックスに「年間売上高」を入力します。
4.「年間売上高」は直ちにキャンパスに表示されます。
5.この折れ線には1系列しかなく、データの系列名は既にタイトルで表示しているから、凡例を設定する必要はありません。[凡例]をクリックします。[凡例表示]のチェックを外します。
6.[系列]をクリックします。[配色]を[カスタマイズ]に設定します。
7.任意の色をクリックすると、[色を選択]パネルが表示されます。
8.本マニュアルでは、[カスタマイズ]タグをクリックし、[#(色の番号)]の後ろに「194f97」を入力します。[OK]をクリックします。
9.[タイプ]を[円]に設定し、[半径]を「4.5」に設定します。
10.最終の効果は以下のようになります。
11.プレビューで確認します。
1.2 円グラフのスタイル変更
1.マウスのカーソルを円グラフに移動し、[編集]をクリックします。右側では、グラフ編集パネルが表示されます。[スタイル]タグをクリックします。
2.[タイトル]をクリックします。[タイトル表示]にチェックを入れます。下図のように、テキストの後ろの入力のボックスに「ランキング」を入力します。
3.[凡例]をクリックします。[凡例表示]にチェックを入れます。[位置]は[下詰め]を選択します。
4.[ラベル]をクリックします。[ラベル表示]にチェックを入れます。[テキスト]では[値]のチェックを外し、[パーセンテージ]にチェックを入れます。
5.[レイアウト]は[円外]に設定します。
6.円グラフの外側にデータラベルが表示され、その数値はパーセンテージです。
7.[系列]をクリックします。[配色]を[カスタマイズ]に設定します。本マニュアルでは、最初の6種類の色を順番にクリックして、配色を設定します。
8.または[＃]の後ろに順番に以下の色の番号を入力して、配色を設定します。
f58d71 fed35b 8692ee 73c5e0 7a99ee 625ba1
9.[スタイル]‐[内径]を「70」に設定します。
10.最終の効果は以下のようになります。
11.プレビューで確認します。
1.3 棒状グラフのスタイル変更
1.マウスのカーソルを円グラフの上に移動し、[編集]をクリックします。右側では、グラフ編集パネルが表示されます。[スタイル]タグをクリックします。
2.[タイトル]をクリックします。[タイトル表示]にチェックを入れます。下図のように、入力のボックスの後ろの[数式] をクリックします。
3.数式パネルで「'売上ランキング'」を入力し、[OK]をクリックします。
注意：ここのタイトルは数式の形で設定しているから、単引用符の追加は忘れないでください。
4.[凡例]をクリックします。[凡例表示]にチェックを入れます。[位置]は[下詰め]を選択します。
5.[系列]をクリックします。[配色]を[カスタマイズ]に設定します。本マニュアルでは、最初の2種類の色を順番にクリックして、配色を設定します。
6.または[＃]の後ろに順番に以下の色の番号を入力して、配色を設定します。
7266e8 555555
7.X軸が完全に表示できるように、[座標軸]‐[X軸]をクリックします。[テキスト回転]を「‐25」に設定します。
8.最終の効果は以下のようになります。
9.プレビューで確認します。
2.ウィジェットスタイルを変更
1.ボタンウィジェットをクリックすると、ウィジェット編集パネルが表示されます。[属性]‐[背景]を[カスタマイズ]に設定します。
2.[初期背景]を[透明]に設定します。
3.プレビューで確認します。
3.キャンパスのスタイル変更
1.右上のコンポーネントツリーで「body」をクリックします。[属性]‐[スタイル]の後ろのをクリックします。
2.[スタイル]パネルが表示されます。
3.[塗りつぶし]を[色]に設定します。
4.[その他の色]をクリックします。
5.[色を選択]パネルで、[カスタマイズ]タグをクリックします。[＃]の後ろに「d4e3f7」を入力し、[OK]をクリックします。
6.[スタイル]パネルの左半分にプレビュー効果が表示されます。[OK]をクリックします。
7.プレビューでダッシュボード確認します。
4.ダッシュボードのインタラクション機能
1.プレビュー状態において、グラフの右上の[ツールバー]をクリックすると、グラフを[ソート]、[保存]、[拡大]することができます。