1. 概述
適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。
1.1 應用場景
在 FVS 範本中製作圖表時，希望根據不同條件，動態顯示警戒線。如下圖所示：
1.2 實現思路
圖表資料及警戒線使用公式獲取儲存格資料，儲存格根據參數過濾實現資料變化。
元件編輯值後透過 JS 重新整理圖表，實現圖表資料跟隨儲存格資料變化。
2. 範例
2.1 建立範本
點選設計器左上角「檔案>建立視覺化看板>建立空白視覺化看板」。
根據實際情況自訂範本名稱、尺寸，選擇範本樣式為「淺色主題一」，最後點選「建立看板」。
2.2 準備資料
根據實際情況準備資料，本例建立 內建資料集，資料集內容如下圖所示：
2.3 設計範本內容
2.3.1 新增組件
在組件區找到標題、表格、折線圖、下拉框組件，新增到畫布中，調整到合適的佈局。如下圖所示：
2.3.2 設定標題組件
分別設定標題內容為「膠種：」和「檢查項：」，用於差別元件內容。如下圖所示：
2.3.3 設定下拉框元件
兩個下拉框元件，將分別綁定參數 jz 和 jcx（即膠種和檢查項的拼音縮寫），用於後續過濾表格資料。
1）選中第一個下拉框元件，綁定參數 jz ，選項值來源為資料集中的「膠種」欄位，預設值為字串「A」。如下圖所示：
2）選中第一個下拉框元件，綁定參數 jcx ，選項值來源為資料集中的「檢查項」欄位，預設值為字串「MH」。如下圖所示：
2.3.4 設定表格組件
1）選中表格，點選右側配置面板「編輯組件」進入編輯介面。
2）將內建資料集中欄位拖入表格，輸入對應標題，具體樣式參考下圖。
3）雙擊 A2 儲存格，設定過濾條件為：(列名:檢查項) 等於 $jcx and (列名:膠種) 等於 $jz
4）點選「傳回視覺化看板」傳回畫布。
2.3.5 設定折線圖組件
選中折線圖，資料來源選擇 儲存格資料 ：
分類名為「檢查日期」所在儲存格，輸入公式 =表格1_頁面1~G2
系列名直接輸入正文「檢查值」
系列值為「檢查值」所在儲存格，輸入公式 =表格1_頁面1~D2
如下圖所示：
2.4 設定警戒線
選中折線圖，點選「樣式>背景>繪圖區」，點選新增警戒線，分別設定「上限」和「下限」。
1）上限
位置選擇「Y軸」，值為公式 =max(表格1_頁面1~E2) ，提示文字內容為公式 ="上限" + max(表格1_頁面1~E2) 。如下圖所示：
2）下限
位置選擇「Y軸」，值為公式 =min(表格1_頁面1~F2) ，提示文字內容為公式 ="下限" + min(表格1_頁面1~F2) 。如下圖所示：
2.5 新增JS重新整理圖表
當圖表使用儲存格資料時，若表格資料更新，圖表是無法跟隨重新整理的。此時可選擇開啟圖表組件監視重新整理，或給元件組件新增編輯結束事件，透過 JS 實現重新整理圖表。
給兩個下拉框元件均新增一個編輯結束事件，JavaScript 程式碼如下：
步驟如下圖所示：
2.6 效果預覽
2.6.1 PC 端
儲存範本，點選右上角「預覽」，效果如 1.1 節所示。
2.6.2 行動端
預覽方式請參考 FVS行動端預覽 ，自行開啟 FVS行動端屬性。效果如下圖所示：
