1. 概述
在儀表板中,除了可以新增圖表和過濾組件等,實現組件交互之外,還能夠新增正文、外部連結、圖片、web網頁。對儀表板的分析內容進行說明、新增標題、補充其他的外部資料等。如果存在較多組件,還支援按照不同的主題,使用多 tab 的形式,在一張儀表板內,分成多頁展示。
接下來,我們學習一下,如何將前幾章學習的「聯動」、「鑽取」、「跳轉」、「切片篩選」專題製作的組件。串成一張儀表板。
2. Tab 組件
2.1 將儀表板分成多頁tab
在之前「聯動、跳轉、鑽取、切片」的學習中,我們建立了很多組件和儀表板。
為了方便查看,我們希望能將它們合到一張儀表板中。但它的組件非常多,合在一個儀表板會導致篇幅很長。
我們可以對不同的主題,分頁展示儀表板。使用 Tab 組件實現。
1)新增「其他組件>Tab 組件」。如下圖所示:
2)點選 Tab 組件,調整位置大小,讓組件佔據一張儀表板頁面大小;
點選 Tab 組件內「 」新增 4 個 tab 頁,並雙擊重命名標題,完成後回車:聯動、鑽取、跳轉、資料切片和篩選。如下圖所示:
3)然後將對應的組件拖入對應的 tab 頁內(在同一個儀表板中,一個組件只能拖入一次,所以重複使用的組件需要複製下)。
完成後,點選頁內組件,調整位置,完成後如下圖所示:
Tab 組件使用詳情可參考文檔:Tab組件
2.2 美化 Tab 組件
將組件有序放在 Tab 組件內之後。 FineBI 支援按照自己的喜好美化 Tab 組件的整體樣式。
點選 Tab 組件「樣式設定」,設定不顯示標題、組件背景透明、Tab 樣式的風格選擇第 2 種、位置置中、調整字體大小,完成後點選「確定」。如下圖所示:
3. 文字組件
這樣一張交互專題的儀表板就完成了,接下來,我們可以對其新增標題等,進行美化。
3.1 新增標題
例如,新增一個文字組件作為標題。輸入文字並調整格式,如下圖所示:
文字組件使用詳情可參考:文字組件簡介
3.2 新增備註(可加超連結)
我們還能夠在「聯動」tab 下,新增「文字組件」,並對文字「➢點選查看說明文檔」新增超連結,例如:src="https://help.fanruan.com/finebi-tw/doc-view-1829.html,如下圖所示:
完成後,點選連結,即可實現網頁連結設定。
4. 儀表板美化
恭喜你!完成了交互專題的學習!
接下來,你可以自己探索美化整個儀表板。
例如,進入組件編輯介面:在「組件樣式」中取消顯示「標題」、「圖例」;下拉分析區域的數值欄位,調整數值格式,用「萬」為單位顯示等。在儀表板編輯介面,也可以調整「儀表板樣式」,設定組件圓角等。
大家可以根據自己的興趣探索復原 demo 中的儀表板:點選查看交互儀表板 demo