1. 概述
1.1 版本
| 報表伺服器版本 | 擴展圖表插件版本 |
|---|---|
| 11.0 | V4.2 |
1.2 應用場景
擴展圖表插件新版本新增「場景地圖跳轉API」，報表中的其它元素可以透過該API跳轉到場景地圖的不同場景。
注：該API僅支援擴展圖表。
例如點選柱形圖不同分類的柱形，場景地圖會跳轉到該分類對應的場景，如下圖所示：
1.3 API用法
透過JavaScript超級連結或者事件新增 JavaScript 程式碼實現，諸如：圖表特效下加超級連結、元件新增點選事件等等。具體 JavaScript 寫法如下：1）第一步：獲取場景切換地圖前端物件實體
API原始碼：
getChartBridge({
* name:'chart0', //必選。圖表塊名稱 chart0 || 懸浮圖表名稱 Float0 || 所在儲存格 A1。
* type:'CHART_EDITOR', //可選。
* //cpt-儲存格圖表 CPT_CELL_CHART || cpt-懸浮圖表 FLOAT_CHART ||
* //frm-圖表塊 CHART_EDITOR || frm-報表塊-儲存格圖表 FORM_EC_CELL_CHART。
* sheetIndex:0, //可選。 sheet下標。
* ecName:'report0' //可選。圖表所在報表塊名稱。
* })
範例寫法：
//表單 圖表塊chart0
var chartBridge = Van.Utils.getChartBridge({name:'chart0'});
//表單 報表塊report0中A1儲存格圖表
var chartBridge = Van.Utils.getChartBridge({name:'A1', ecName:'report0'});
//cpt 懸浮圖表Float1
var chartBridge = Van.Utils.getChartBridge({name:'Float1'});
//cpt A1儲存格圖表
var chartBridge = Van.Utils.getChartBridge({name:'A1'});
2）第二步：圖表物件實體呼叫跳轉API
API原始碼：
switchScene({
* direction:'next', // 可選。切換方向。 下一個(右箭頭)next || 上一個(左箭頭)previous。
* name:'場景2', // 可選。場景名稱。
* index:1 // 可選。場景下標。 第一個場景的場景下標為0。
* })
範例寫法：
//切換到 下標為0的場景
chartBridge.switchScene({index:0});
//切換到 名稱為'場景1'的場景
chartBridge.switchScene({name:'場景1'});
//切換下一個場景
chartBridge.switchScene({direction:'next'});
//切換上一個場景
chartBridge.switchScene({direction:'previous'});
2. 範例
2.1 準備資料
1）建立決策報表，建立內建資料集長三角各省份銷量資料，如下圖所示：
2）建立內建資料集城市銷量資料，如下圖所示：
2.2 插入圖表
將柱形圖和場景切換地圖分別插入到決策報表中，再調整下 2 個圖表組件的佈局，如下圖所示：
2.3 設計柱形圖
1）綁定柱形圖資料，具體設定如下圖所示：
2）取消勾選標題可見和圖例可見，如下圖所示：
3）將 X 軸的軸標籤設定為白色，因為後面要給柱形圖新增一個深色填充背景，所以這邊改成白色，如下圖所示：
4）選中柱形圖組件，給組件新增一個深色填充背景，如下圖所示：
2.4 設計場景切換地圖
1）新增 4 個場景：上海市、江蘇省、浙江省、安徽省，如下圖所示：
2）這 4 個場景的具體設定其實是一樣的，只是在地圖角度上有所不同，因此只介紹下如何設定上海市場景，其它 3 個場景同理設定即可。
調整下上海市地圖的視角，然後儲存，將地圖邊框設定為上海市，其它 3 個場景需要設定為各自的省份，如下圖所示：
3）綁定場景資料，資料形式選擇點，4 個場景綁定資料的設定都是一樣的，如下圖所示：
4）點半徑和標籤字元預覽時比較小，需要調大點，點半徑調到1.3，字元調到3.5，4 個場景都要一樣設定，如下圖所示：
2.5 設定跳轉
回到柱形圖，在屬性面板特效>交互屬性下，新增一個 JavaScript 類型的超級連結，如下圖所示：
超連結需要新增參數p1，其值為公式CATEGORY，該參數對應柱形圖的分類名，用於程式碼中跟場景名稱匹配，實現點選哪個柱形，地圖就跳轉到分類名和場景名稱相同的場景。
JavaScript 程式碼如下圖：
//獲取場景切換地圖chart1
var chartBridge = Van.Utils.getChartBridge({name:'chart1'});
//切換到場景名稱為參數p1的場景
chartBridge.switchScene({name:p1});
2.6 效果預覽
儲存報表，點選PC端預覽，點選柱形跳轉場景的效果如下圖所示：
注：擴展圖表不支援行動端。
3. 範本下載
點選下載範本：場景切換地圖跳轉接口.frm
