互動式儀表板教學
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步！超簡單~
