場景地圖場景切換API

1.1 版本

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

.
注：擴展圖表不支援行動端。

點選下載範本：場景切換地圖跳轉接口.frm