互動式儀表板教學
Hello大家好,這篇文章是一個簡單的互動式儀表板的實戰教學。因為想做一個對新手友好的教學,所以用到的元件都很簡單,只用了一些簡單的參數、查詢元件和基本圖表。
對於程式碼幾乎沒有要求,只要你會寫1條SQLselect * from ...
就好~~~這份教學我也寫的超詳細,基本都有圖片展示~
這是最終的互動效果,比如點選某個銷售員可以把他的數據從圖表中移除,可以切換地區檢視,如下圖:
如果你有興趣的話,可以和我一起學習~~!
第一步:新建報表
這次用的製作工具是FineReport(用免費個人版👉下載&啟用碼 )。
打開FineReport,選單欄點選檔案
>新建決策報表
,新建一張空白的決策報表。如下圖所示:
決策報表
就是專用來做儀表板的。可以看到上方框框是會在儀表板中出現的一些常用圖表,直接用滑鼠拖下來就可以用。
藍色的是預覽按鈕,可以隨時點擊預覽來檢視效果。
將報表設計主體的大小設定為 800畫素 x 500畫素
。
這裡的+
用來新建資料集~
第二步:新建資料集
關於資料集:
這次教學我用的是軟體附帶的資料集,不用另外爬取或下載。
點擊+
>資料集查詢
新建資料集 ds1
, 下拉框裡可以選擇FRDemo,這些是包含在軟體內的資料集,一共大概有40多個(我沒仔細數~),非常適合新手用來學習、試做。
SQL 語句為:SELECT * FROM 銷量 WHERE 地區='${地區}'
,SQL 語句中定義了一個資料集參數「地區」。
注意,因為我的FineReport可能是下載版本選擇錯,附的教學資料集是簡體中文,所以寫SQL的時候我必須要使用一樣的字。為了避免這個問題,大家要去帆軟台灣官網下載繁體版~
選中元件列表中 body
,在右下角的「屬性」面板中將佈局方式改為絕對佈局
,縮放邏輯為「固定大小」。body 佈局方式有四種,使用者可根據實際應用場景調整,這裡因為元件較少,不存在相互疊加情況,故選擇「絕對佈局>固定大小」。如下圖所示:
將元件參數面板(紅色)、報表塊(黃色)、圓餅圖、柱形圖(藍色)按照下圖的佈局樣式,拖入到報表設計主體中。
第三步:參數
選中參數
面板(綠色框),右上角控制元件設定面板會顯示沒有新增控制元件的參數,點選地區或者點選全部新增
,參數的預設控制元件將會新增到參數面板。
然後,如下圖所示的這些元件,pong的一下就會全部出現~~~
將自定義控制元件設定為「下拉框控制元件」
在屬性
>資料字典
處為控制元件關聯「銷量」表的「地區」欄位。
第四步:設計圖表和報表塊
點選圓餅圖的編輯按鈕,進入圓餅圖塊,設定圓餅圖的內容和屬性。首先是要把圖表和資料關聯在一起,點中資料
然後按照下圖修改
然後,點選右下方元件屬性中的樣式
,設定圓餅圖的標題為「產品類型與銷量」。如下圖所示:
在系列
裡面可以選擇配色方案,我用的是新特性
。你也可以選擇自己喜歡的風格。
最後,點選柱形圖的編輯
按鈕,進入長條圖塊,設定柱形圖的內容和屬性。關聯資料的做法和做餅狀圖是一樣的~
然後我們來處理報表塊,點選報表塊的編輯
按鈕,進入報表塊,設定報表塊的內容和屬性。
1. 用滑鼠把資料集ds1
中的相關資料拖拽到儲存格裡。
2. 在紅色框裡的工具中選擇 F(x)寫公式,求和項是在右側元素>基本>資料設定中修改。
3. 在工具裡選擇這個斜線按鈕,就可以製作出左上角那一格的效果了。
儲存格裡如果填的是來自ds1的資料,那麼在展示時就會按照設定好的擴展方向展開,如果你想要顯示特定的文字,那麼可以直接寫入文字。
雖然看上去很簡單,但是還是出現了一些問題。如果你也出現了下圖的問題,那麼應該是擴展方向
沒有選好
解決辦法:
按照我這樣設計父子格
和擴展方向
。黃色框框裡的箭頭代表是父格
,綠色款款裡的箭頭代表擴展方向
。
如果你不太懂什麼叫做父子格,可以看這個Youtube上的視頻:父子格的功能
確定都沒問題的話,完成後點選下面的表單
,返回決策報表設計介面。
第五步:外觀設計
做到這一步我其實把資料都做的差不多了,迫不及待想看看,點擊預覽
就可以~~
可以發現,超醜….沒關係,我再調整一下樣式和設計~~
這就是最後的成果了,點擊存儲
和預覽
按鈕,就大功告成啦!!!
如果你覺得有趣,不如一起動手做做看
作者:Groots,原文連結:Dashboard製作教學:做一張互動式儀表板,只需要5步!超簡單~