場景切換地圖跳轉接口

1.1 版本

1.2 應用場景

擴展圖表插件新版本新增場景地圖跳轉接口，報表中的其它元素可以通過該接口跳轉到場景地圖的不同場景。

例如點擊柱形圖不同分類的柱形，場景地圖會跳轉到該分類對應的場景，如下圖所示：

1.3 接口用法

通過JavaScript超級鏈接或者事件添加 JavaScript 代碼實現，諸如：圖表特效下加超級鏈接、控件添加點擊事件等等。具體 JavaScript 寫法如下：

1）第一步：獲取場景切換地圖前端對象實例

接口源碼：

 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）第二步：圖表對象實例調用跳轉接口

接口源碼：

 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.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端預覽，點擊柱形跳轉場景的效果如下圖所示：

注：擴展圖表不支持移動端。

已完成模板參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\場景切換地圖跳轉接口.frm

點擊下載模板：場景切換地圖跳轉接口.frm