ダッシュボードのレイアウト

1.バージョン

2.応用シーン

既に作成済みの可視化ダッシュボードに対し、自由にレイアウトを設定したり、レイアウトの美化を行ったりするニーズがある場合に適用されます。

3.機能説明

FineBIのダッシュボードレイアウト方式には、グリッドレイアウトとフリーレイアウトの2種類があります。

デフォルトはグリッドレイアウトで、コンポーネント間の間隔があるかどうかを設定できます。フリーレイアウトは、コンポーネントのフローティング設定を行うことで実現されます。

 · グリッドレイアウト

 · フリーレイアウト

グリッドレイアウトは縦方向への延伸のみをサポートし、横方向への延伸はサポートしません。グリッドレイアウトでは平面がルールに従って複数のセルに分割され、各コンポーネントは一定数のセルを占めます。画面サイズが変化した場合、画面の実際の幅と高さに応じてセルが再分割され、コンポーネントの画面全体に対する割合は変わりません。

デフォルトのレイアウト方式では、コンポーネント間に間隔が存在しますが、間隔なしに調整することも可能で、コンポーネントは常に頂上部に配置され、コンポーネント間の重なりは許可されません。

1.コンポーネント間隔の設定

ダッシュボード編集画面に入ると、デフォルトのグリッドレイアウトではコンポーネント間に固定の間隔が設定されています。以下の図のように：

[ダッシュボードスタイル]-[カスタム]をクリックし、[ダッシュボード]-[コンポ間隔]でコンポーネント間の間隔を設定できます。例えば間隔を「2」に設定すると、コンポーネント間の間隔が小さくなります。効果は以下の図のように：

2.コンポーネントサイズの調整

· ドラッグ操作により自由にコンポーネントサイズを調整できます。以下の図のように：

· コンポーネントの幅を画面幅に対する固定割合に迅速に設定したい場合は、[幅を設定]機能を直接使用できます。

例えば、3つのフィルタコンポーネントの幅を同じにし、画面を埋め尽くしたい場合、フィルタコンポーネントの幅を画面の1/3に設定できます。プルダウンメニューをクリックし、[幅を設定]を選択します。以下の図のように：

フリーレイアウトはコンポーネントのフローティング設定を行うことで実現されます。コンポーネントに[フローティング]をチェックすると、自由に位置とサイズをドラッグして調整でき、コンポーネントが重なった際の表示順序の調整もサポートします。

1.コンポーネントのフローティング設定

ダッシュボードのレイアウトを自由に設定し、コンポーネントの順序と位置を自由にドラッグしたい場合は、コンポーネントを選択し、プルダウンメニューから[フローティング]を設定します。以下の図のように：

2.コンポーネント位置の調整

フローティング設定後、当該コンポーネントは任意の位置にドラッグでき、コンポーネントサイズも自由に設定できます。グリッドレイアウトの平面分割ルールの制限を受けません。以下の図のように：

3.コンポーネント重なり順序の設定

同時にフローティング設定された2つのコンポーネントについては、[最前面へ移動/最背面へ移動]の順序設定を行うことで、コンポーネントの表示順序を調整できます。以下の図のように：

4.コンポーネントサイズの調整

フローティングコンポーネントのサイズ調整方法はグリッドレイアウトと同じです。詳細は本文の第2章第2節を参照してください。