ダッシュボードスタイル

1.バージョン

2.応用シーン

ダッシュボードを作成した後、ダッシュボードの美化操作を行い、ダッシュボードのスタイルを変更またはカスタマイズしたい場合があります；

また、カスタムスタイルを保存した後、それを他のダッシュボードの作成に再利用したい場合もあります。

3.機能説明

FineBIはダッシュボードスタイルの設定機能を提供しており、ダッシュボード全体の背景、タイトル、コンポーネント、チャート/テーブルのスタイルと配色、フィルタコンポーネントのテーマなどを設定できます。

 · [事前定義]のダッシュボードを直接選択できます。

 · [カスタマイズ]スタイルのダッシュボードを設定できます。 

 · 現在のユーザは、他のダッシュボードでこのダッシュボードのカスタムスタイルを使用できます。[既定スタイルで保存]をクリックすることで実現できます。

3種類のダッシュボードスタイルの設定説明は次の表の通りです：

4.前提条件

コンポーネントを作成し、既にダッシュボードに追加します。

5.制約と制限

 · カスタムスタイルとして保存したスタイルの有効範囲：現在作成しているすべてのダッシュボードで、以前に保存したカスタムスタイルを選択できます。

 · 保存していないカスタムスタイルの有効範囲：現在のダッシュボードのみです。

 · コンポーネントをダッシュボードに追加していない場合、コンポーネントのスタイルはデフォルトスタイルになります。ダッシュボードに追加した後、ダッシュボードスタイルを設定している場合は、コンポーネントのスタイルはダッシュボードスタイルを継承します。

 · ダッシュボードスタイルの有効優先順位は以下の通りです：コンポーネントスタイル＞ダッシュボードスタイル＞BIグローバルスタイル。

 · ユーザのデフォルトのダッシュボードスタイルは管理者のみが変更できます。

 · 低バージョンのIEブラウザ（一般的にIE10以下）では、一部のコンポーネントの背景スタイルとコンポーネントタイトルの背景スタイルの効果が影響を受ける可能性があります。

対応するダッシュボードを選択し、編集画面をクリックします。以下の図のように：

FineBIには複数のダッシュボードスタイルがプリセットされています。ダッシュボード編集画面で[ダッシュボードスタイル]-[事前定義]をクリックすると、スタイルを変更できます。以下の図のように：

ダッシュボード編集画面で[ダッシュボードスタイル]をクリックし、[カスタマイズ]をクリックすると、カスタムスタイルの編集画面に入ります。以下の図のように：

注意：編集後は自動的にダッシュボードにプレビュー効果が表示されますが、[確定]をクリックするとカスタム効果が有効になります。カスタムスタイルとして保存しない場合は、このダッシュボードでのみスタイルが有効になります。

カスタムダッシュボードスタイルの設定項目は次の表の通りです：

1.基礎スタイルの設定

カスタムスタイルの基礎スタイルを[ブルーグレー]に選択し、その上で変更を加えます。以下の図のように：

2.ダッシュボードスタイルの設定

1）[ダッシュボード]をクリックしてスタイルを設定します。ダッシュボードの[背景]と[コンポ間隔]を設定できます。

背景色を[インディゴ]に設定し、[コンポ間隔]を「12」に設定します。以下の図のように：

注意：コンポーネントに[フローティング]を設定している場合、ダッシュボードスタイルでコンポーネント間に間隔を設定していても、コンポーネントは重ねて表示されることができます。

2）ダッシュボードの設定説明は次の表の通りです：

3.コンポーネントスタイルを設定

3.1コンポーネントタイトル

タイトルでは、ダッシュボード内のコンポーネントタイトルの[背景]、[文字]を一括して設定できます。

タイトル設定の説明は次の表の通りです：

3.2コンポーネント背景

コンポーネントでは、ダッシュボード内のすべてのコンポーネントの背景を一括して設定できます。[色]と[コンポーネントスタイル]の2種類に分けられます。

· 色

色を[自動]に設定し、コンポーネントの枠線を角丸「6」px、枠「2」、「青色」に設定します。効果は以下の図のように：

· コンポーネントスタイル

コンポーネントの背景設定は以下の図のように：

注意：コンポーネントスタイルはカスタム画像と様々なスタイルをサポートします。カスタム画像では、画像をアップロードして背景として使用できます。背景画像のサイズと画素数には制限はありません。

  3.3フローティングシャドウ

6.0.16バージョンでは、コンポーネントの[フローティングシャドウ]を表示するかどうかを設定できます。複数のコンポーネントにフローティング効果を持つダッシュボードでは、シャドウをオフにすることで、ダッシュボードの効果を美化できます。

[フローティングシャドウ]を表示する場合、ダッシュボードのプレビュー効果は以下の図のように：

[フローティングシャドウ]をオフにする場合、ダッシュボードのプレビュー効果は以下の図のように：

4.チャートスタイルを設定

ダッシュボード内のチャートの[配色]とチャート内の[文字]のスタイルを設定できます。以下の図のように：

チャート設定の詳細な説明は次の表の通りです：

5.テーブルスタイルを設定

1）テーブルでは、ダッシュボード内のすべてのテーブルコンポーネントのスタイルを一括して設定できます。[スタイル]、[テーマ配色]、[文字]とスクロールバーを含みます。

この中で、文字のカスタマイズでは、[ヘッダ]と[本体]のフォントスタイルをそれぞれ設定できます。

文字のスタイルをカスタマイズした後の効果は以下の図のように：

テーブル設定の詳細な説明は次の表の通りです：

6.フィルタコンポーネントスタイルを設定

フィルタコンポーネントでは、このダッシュボード内のすべてのフィルタコンポーネントのスタイルを一括して設定できます。タイトルの背景、タイトルの文字、コンポーネントの背景、テーマ配色を設定できます。

フィルタコンポーネントの[タイトル背景]を「青色」、[文字]を[自動]、[コンポーネント背景]を「青色」、コンポーネントの[枠]を「角丸グレー」、[枠]の太さを「3」に設定します。また、フィルタコンポーネントの選択ボックスの[色]を「ピンク」に設定します。効果は以下の図のように：

7.画像コンポーネントスタイルを設定

画像コンポーネントの背景と角丸の枠を個別にカスタマイズできます。

背景が透明の画像をアップロードすると、背景はデフォルトで白色になります。ユーザは[ダッシュボードスタイル]で、画像の背景を透明または他の色に調整できます。また、別の画像をアップロードして背景として使用することもできます。以下の図のように：

また、画像コンポーネントの角丸と枠を個別に設定できます。

カスタムダッシュボードスタイルを設定した後、他のダッシュボードで繰り返し使用する必要がある場合は、[既定スタイルで保存]をクリックしてください。既定スタイルには、このカスタムスタイルが表示されます。以下の図のように：

注意：同一のユーザは最大3つのカスタムスタイルを追加できます。

[事前定義]タブで、追加したカスタムスタイルのタイトルをクリックすると、カスタムスタイルをリネームできます。以下の図のように：

注意：管理者のグローバルスタイルは管理者のみがリネームできます。システムに付属の既定スタイル1-6は変更できません。

ユーザが保存したカスタムスタイルにマウスを合わせると、左上に削除ボタンが表示されます。クリックして再度確認し、[確定]をクリックすると削除できます。以下の図のように：

注意：管理者のグローバルスタイルは管理者のみが削除できます。システムに付属の既定スタイル1-6は変更できません。