當前為5.1版本文檔,更多實例內容將在最新幫助文檔中展現,點選跳轉至 最新版幫助文檔

儀表板樣式

1. 概述

儀表板樣式線上視頻學習請查看:儀表板樣式 

1.1 版本

FineBI 版本JAR 包版本功能變動
  5.12020-01-15
-
5.1.6-
自訂樣式可存為預設樣式,供同一使用者在其他儀表板使用
5.1.14-「圖表配色」支援自訂
5.1.16-儀表板樣式改版,修改為「預設」和「自訂」兩個tab頁。

新增更多預設樣式和自訂功能,滿足更多的使用者需求。

注:低版本的 IE 瀏覽器(一般 IE10 以下),部分組件背景樣式和組件標題背景樣式效果可能會受影響。

1.2 應用場景

使用者製作完儀表板內組件,進行儀表板美化操作。可以更改,自訂儀表板樣式,自訂樣式儲存後,使用者能夠運用於其他的儀表板製作。

1.3 功能介紹

儀表板樣式提供了從全局角度調整畫布的功能,可設定整張儀表板的背景、標題、組件、圖表/表格風格和配色、過濾組件主題等。並可將調整後的儀表板樣式效果儲存。方便使用者運用於其他的儀表板製作。

1.3.1 儀表板樣式入口

在儀表板編輯介面點選「儀表板樣式」,則跳出儀表板樣式編輯介面,如下圖所示:

1.3.2 儀表板樣式介面說明

儀表板樣式」介面功能詳細說明,如下圖所示:

  • 支援直接選擇「預設樣式」的儀表板;

  • 支援設定「自訂」樣式的儀表板;

  • 當前使用者支援在其他儀表板使用該儀表板的自訂樣式,點選「存為自訂樣式」實現。

設定好的儀表板樣式有三類,自訂樣式、全局樣式和預設樣式,如下圖所示:

三類儀表板樣式說明如下表所示:

儀表板樣式展示順序設定好的儀表板樣式樣式說明
1自訂樣式僅當前使用者可新增,刪除,重命名自訂樣式。一個使用者最多新增 3 個自訂樣式

注:若需要修改自訂樣式可點選目標儀表板樣式,設定自訂樣式後「存為預設樣式」,刪除原先的儀表板樣式。

2全局樣式僅管理者可新增,刪除,修改,重命名全局樣式。管理者最多新增 5 個全局樣式。

儀表板預設樣式為管理者設定的全局樣式。詳情參見:BI全局樣式

3預設樣式有 14 種系統自帶的預設樣式,不可刪除、修改、重命名。

1.4 生效範圍

使用者存為自訂樣式的樣式生效範圍:當前使用者製作的所有儀錶板,都可以選擇之前儲存的自訂樣式。

使用者未儲存的自訂樣式生效範圍:當前儀錶板。

儀錶板樣式生效優先排列為:組件樣式>儀錶板樣式>BI 全局樣式。

注:使用者預設儀表板樣式僅可由管理者更改,步驟請參見:BI全局樣式

2. 更改儀表板樣式

開啟「儀表板樣式」點選儀表板預設樣式,達到預期效果之後點選「確定」即可更改樣式。如下圖所示:

若預設樣式不滿意,可以自訂樣式。

3. 設定自訂樣式

在組件編輯點選介面「儀表板樣式」,點選「自訂」,進入自訂樣式編輯介面,如下圖所示:

注:編輯後,自動在儀表板展示預覽效果,點選「確定」才會生效自訂效果。若不存為自訂樣式,則該樣式僅在此儀表板生效。

自訂儀表板樣式設定項,如下表所示:

樣式可設定專案 
基礎樣式選擇預設樣式,在該樣式基礎上進行自訂
存為預設樣式點選存為預設樣式,在「預設」tab頁中顯示。可以運用於其他儀表板中
儀表板儀表板背景、組件間隙
組件標題背景、標題文字、組件背景、組件邊框
圖表圖表的整體配色、圖表中的正文格式
表格表格風格、主題色和文字格式
過濾組件標題背景、標題文字格式、組件背景、組件邊框、主題色

3.1 設定基礎樣式

選擇自訂樣式的基礎樣式為「經典白」。在此基礎上修改。如下圖所示:

3.2 設定儀表板

1)點選「儀表板」設定樣式。可設定儀表板的「背景」和「組件間隙」。

背景顏色設定「藍灰色」,組件間隙設定「12」,效果如下圖所示:

注:若組件設定了 組件懸浮 ,那麼儘管在儀表板樣式處設定組件之間有間隙,但組件仍然可以重疊展示。

2)儀表板設定說明如下表所示:

設定儀表板說明
背景

儀表板背景可設定為「顏色」或者「圖片」。

  • 顏色:點選可設定背景顏色。選擇自訂顏色、透明、自動。

  • 圖片:點選可上傳圖片,作為儀表板背景。上傳的背景圖片的大小和像素沒有要求。

組件間隙設定組件間隙大小,設定為 0 則無間隙。

3.2 設定組件樣式

3.2.1 設定組件標題樣式

標題可統一設定儀表板中組件標題的「背景」和「文字」。

1)標題背景設定為「標題樣式>科幻標題裝飾」,效果如下圖所示:

2)標題文字設定。「自訂」,字號設定「14」,字體顏色設定「藍色」。如下圖所示:

3)標題設定說明如下表所示:

標題設定說明
背景

標題背景可設定為「顏色」或者「標題樣式」。

  • 顏色:點選可設定背景顏色。選擇自訂顏色、透明、自動。

  • 標題樣式:支援自訂圖片和各種風格的樣式。自訂圖片可上傳圖片作為標題背景,背景圖片的大小和像素沒有要求。

文字

標題文字可設定「自動」或者「自訂」。

詳細說明可參見:組件標題-編輯標題

3.2.2 組件背景樣式

組件中可統一設定儀表板中所有組件的背景,分為「顏色」和「組件樣式」兩種。

  • 顏色

顏色設定「自動」,組件邊框設定圓角「6」px,邊框「5」,顏色為深藍色。效果如圖所示:

  • 組件樣式

組件背景設定為「組件樣式>自訂圖片」後,效果如下圖所示:

注:組件樣式支援自訂圖片和各種風格的樣式。自訂圖片可上傳圖片作為背景,背景圖片的大小和像素沒有要求。

3.4 設定圖表

可設定儀表板中的圖表「配色」和圖表中的「文字」樣式。如下圖所示:

圖表設定的詳細說明如下表所示:

圖表設定說明
配色1)可根據使用者需要,選擇修改圖表中的組件元素配色風格。如下圖所示:

2)使用者可自訂圖表配色,如下圖所示:

文字文字可配置組件中字體的樣式,包含圖表中的橫縱軸、分類軸、值軸的文字等。

標題文字可設定「自動」或者「自訂」

字體設定詳細說明可參見:組件標題-編輯標題

3.5 設定表格

1)在表格下可統一設定儀表板中所有表格組件的樣式,包括「風格」、「主題色」和「文字」,其中文字自訂中可分別設定「表頭」和「表身」的字體樣式。

自訂文字樣式後,效果如下圖所示:

表格設定詳情說明如下表所示:

表格設定說明
風格可設定三種不同的表格整體風格
主題色點選可設定表格組件的主題顏色。可選擇自訂顏色、透明、自動實現不同效果
文字文字可設定「自動」或「自訂」的字體樣式,自訂中可分別設定「表頭」和「表身」的字體樣式。

自訂字體樣式說明可參見:組件標題-編輯標題

表身的維度、指標支援設定對齊方式。

3.6 設定過濾組件

過濾組件中可統一設定該儀表板中所有過濾組件的樣式。可設定標題背景、標題文字、組件背景、主題色。

將過濾組件標題背景設定「粉色」,標題文字自動,組件背景設定為「西瓜紅」,組件邊框設定為圓角深紅色,邊框粗細為「5」。並設定過濾組件選擇框的主題色為「黑色」。效果如下圖所示:

過濾組件設定說明
標題背景

標題背景可設定為「顏色」或者「圖片」。

  • 顏色:點選可設定背景顏色。選擇自訂顏色、透明、自動。

  • 圖片:點選可上傳圖片,作為儀表板背景,背景圖片的大小和像素沒有要求。

標題文字

標題文字可設定「自動」或者「自訂」。

詳細說明可參見:組件標題-編輯標題

組件背景

組件背景可設定為「顏色」或者「圖片」,同標題背景。

還可設定組件邊框粗細,顏色,邊框圓角程度

主題色可設定過濾組件選擇框的主題色

4. 新增使用者自訂樣式

設定自訂儀表板樣式後,如果使用者需要反覆使用於在其他儀表板,可點選「存為預設樣式」。預設樣式中即出現該自訂樣式。如下圖所示:

注:同一使用者最多新增 3 個自訂樣式。

5. 重命名自訂樣式

在「預設」tab下,點選新增的自訂樣式標題,即可重命名自訂樣式,如下圖所示:

注:管理者的全局樣式僅管理者可重命名,系統自帶的預設樣式 1-6 不可修改。

6. 刪選使用者自訂樣式

滑鼠懸停在使用者儲存的自訂樣式上,左上角就會出現刪除的按鈕,點選後再次應答,點選「確定」即可刪除。如下圖所示:

注:管理者的全局樣式僅管理者可刪除,系統自帶的預設樣式 1-6 不可修改。

附件列表


主題: 设计和分享仪表板
已經是第一篇
已經是最後一篇
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 评价文档,奖励 1 ~ 100 随机 F 豆!