Dashboard製作教學：做一張互動式儀表板，只需要5步！超簡單~

資料分析 dashboard 資料庫 sql 學習

groots 2020-11-19 17:06:43 ‧ 7089 瀏覽

分享至

Hello大家好，這篇文章是一個簡單的互動式儀表板的教學。因為想做一個對新手友好的教學，所以用到的元件都很簡單，只用了一些簡單的參數、查詢元件和基本圖表。對於程式碼幾乎沒有要求，只要你會寫1條SQL（Select * from）就好~~~
這份教學我也寫的超詳細，基本都有圖片教學~
互動效果如下圖：

（比如點選某個銷售員可以把他的數據從圖表中移除，可以切換地區檢視）

如果你有興趣的話，可以和我一起學習~~!

第一步：新建報表

這次用FineReport（免費個人版）來製作儀表板，使用起來很簡單，參數和元件配合用起來也很靈活~
下載FineReport報表軟體後打開軟體，選單欄點選檔案>新建決策報表，新建一張空白的決策報表。如下圖所示：

決策報表就是專用來做儀表板的。可以看到上方框框是會在儀表板中出現的一些常用圖表，直接用滑鼠拖下來就可以用。藍色的是預覽按鈕，可以隨時點預覽來檢視效果，首次預覽的時候會彈出保存的窗口，按照提示完成就好。

將報表設計主體的大小設定為 800畫素 x 500畫素。

這裡的+用來新建資料集~

第二步：新建資料集

點+>資料集查詢新建資料集 ds1， SQL 語句為：SELECT * FROM 銷量 WHERE 地區='${地區}'，SQL 語句中定義了一個資料集參數「地區」。

注意，因為我的FineReport可能是下載版本選擇錯，附的教學資料集是簡體中文，所以寫SQL的時候我必須要使用一樣的字。大家注意是去帆軟台灣網站下載繁體版~
選中元件列表中 body ，在右下角的「屬性」面板中將佈局方式改為絕對佈局，縮放邏輯為「固定大小」。body 佈局方式有四種，使用者可根據實際應用場景調整，這裡因為元件較少，不存在相互疊加情況，故選擇「絕對佈局>固定大小」。如下圖所示：

將元件參數面板、報表塊、圓餅圖、柱形圖按照下圖的佈局樣式，拖入到報表設計主體中。

第三步：參數

選中參數面板，右上角控制元件設定面板會顯示沒有新增控制元件的參數，點選地區或者點選全部新增，參數的預設控制元件將會新增到參數面板。

然後，如下圖所示的這些元件，pong的一下就會全部出現~~~

將自定義控制元件設定為「下拉框控制元件」

在屬性>資料字典處為控制元件關聯「銷量」表的「地區」欄位。

第四步：設計圖表和報表塊

點選圓餅圖的編輯按鈕，進入圓餅圖塊，設定圓餅圖的內容和屬性。首先是要把圖表和資料關聯在一起，點資料然後按照下圖修改

然後，點選右下方元件屬性中的樣式，設定圓餅圖的標題為「產品類型與銷量」。如下圖所示：

在系列裡面可以選擇配色方案，我用的是新特性。你也可以選擇自己喜歡的風格。

最後，點選柱形圖的編輯按鈕，進入長條圖塊，設定柱形圖的內容和屬性。關聯資料的做法和做餅狀圖是一樣的~
然後我們來處理報表塊,點選報表塊的編輯按鈕，進入報表塊，設定報表塊的內容和屬性。

用滑鼠把資料集ds1中的相關資料拖拽到儲存格裡。
在紅色框裡的工具中選擇 F(x)寫公式，求和項是在右側元素>基本>資料設定中修改。
在工具裡選擇這個斜線按鈕，就可以製作出左上角那一格的效果了。

儲存格裡如果填的是來自ds1的資料，那麼在展示時就會按照設定好的擴展方向展開，如果你想要顯示特定的文字，那麼可以直接寫入文字。
雖然看上去很簡單，但是還是出現了一些問題。如果你也出現了下圖的問題，那麼應該是擴展方向沒有選好

解決辦法：

按照我這樣設計父子格和擴展方向。黃色框框裡的箭頭代表是父格，綠色款款裡的箭頭代表擴展方向。
如果你不太懂什麼叫做父子格，可以看這個Youtube上的視頻：父子格的功能
確定都沒問題的話，完成後點選下面的表單，返回決策報表設計介面。