圖表聯動圖表

1.1 版本

1.2 預期效果

使用者在製作報表時，希望圖表之間能產生聯動效果。例如點選餅圖的系列（地區），直條圖能顯示對應地區下銷售員的銷量。預期效果如下圖所示：

1.3 實現思路

透過在圖表特效中新增超連結實現。普通報表新增連結名稱為「圖表超連結>聯動儲存格」，決策報表新增連結名稱為「當前表單物件」。

2.1 準備資料

1）點選設計器左上角「檔案>建立普通報表」，範本主題選擇「清爽科技」。

2）建立兩個資料集，SQL 查詢語句分別為：

ds1：SELECT * FROM 銷量

ds2：SELECT * FROM 銷量 WHERE 1=1  ${if(len(area) == 0,"","and 地區 = '" + area + "'")} 。表示參數 area 為空時選擇全部資料。

2.2 設計報表

2.2.1 插入圖表

分別合併兩片儲存格區域，插入一個「餅圖」和一個「柱形圖」。如下圖所示：

2.2.2 綁定資料

分別選中圖表，點選右側屬性面板「儲存格元素>資料」，綁定資料如下圖所示：

2.2.3 設定超連結

選中餅圖，點選「儲存格元素>特效>互動屬性」，在超級連結處新增連結「圖表超連結>聯動儲存格」。聯動儲存格設定為柱形圖所在 A16 儲存格，新增參數 area，參數值選擇「系列名稱」，自動填充 =SERIES  。即將餅圖的系列作為參數 area 的值傳遞給柱形圖，從而產生聯動。

如下圖所示：

到這裡，圖表的超連結就設定完成了，儲存報表，點選分頁預覽查看下效果。如下圖所示：

2.2.4 設定圖表標題

我們已經完成了圖表的聯動效果，接下來我們設定圖表標題，使柱形圖的標題也能產生聯動。

餅圖的標題直接輸入文本「地區總銷量」，柱形圖的標題需要點選 F(x) 進入公式定義介面，輸入公式 area+"銷售員銷量"。

以柱形圖為例，標題設定步驟如下圖所示：

2.3 效果預覽

2.3.1 PC 端

儲存報表，點選「分頁預覽」，效果如下圖所示：

2.3.2 行動端

App 端和 HTML5 端均支援，效果如下圖所示：

3.1 設計報表

3.1.1 設定組件聯動

在 FVS 視覺化看板中，各項設定大致相同，只是組件聯動的方式不太相同。

選中餅圖，點選右側配置區「互動>點選事件」，新增一個「組件聯動」事件，彈出組件聯動設定框。

• 事件名稱：隨意設定即可。

• 聯動範圍：選擇「指定物件」。若選擇「全局聯動」，則對整個範本所有分頁有效，不會出現聯動物件選擇框。

• 聯動對象：點選輸入框，在下拉清單中選擇我們要聯動的組件物件，本例中對應「頁面1_直條圖」組件。

• 參數名輸入定義好的地區參數 area ，參數型別選擇「當前組件欄位」，參數內容選擇「系列名」。

即點選餅圖的系列，可將系列名作為 area 參數的值，傳遞給被選擇的聯動物件，從而實現聯動變化效果。

步驟圖如下所示：

3.1.2 設定圖表標題

我們已經完成了圖表的聯動效果，接下來我們設定圖表標題，使直條圖的標題也能產生聯動。

餅圖的標題直接輸入文本「地區總銷量」，直條圖的標題需要點選 F(x) 進入公式定義介面，輸入公式 area+"銷售員銷量"。

以直條圖為例，標題設定步驟如下圖所示：

3.2 效果預覽

3.2.1 PC 端

儲存報表，點選「預覽」，效果如下圖所示：

3.2.2 行動端

App 端和 HTML5 端均支援，效果如下圖所示：

4.1 設定超連結

在決策報表中，各項設定大致相同，只是新增的超連結名稱不同，決策報表中新增的超連結是「當前表單物件」。如下圖所示：

另外，在決策報表中，除了圖表自身的標題外，還可以設定組件標題，同樣能實現標題的聯動效果。如下圖所示：

4.2 效果預覽

4.2.1 PC 端

預覽效果如下圖所示：

4.2.2 行動端

App 端 和 HTML5 端均支援，效果如下圖所示：

點選下載範本：

圖表聯動圖表-普通報表.cpt

圖表聯動圖表-FVS.fvs

圖表聯動圖表-決策報表.frm