反饋已提交

網絡繁忙

場景地圖場景切換API

1. 概述

1.1 版本

報表伺服器版本擴展圖表插件版本
11.0V4.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

附件列表


主題: 圖表應用
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉

獲取幫助
線上支援
獲取專業技術支援,快速幫助您解決問題
工作日9:00-12:00,13:30-17:30在线
頁面反饋
針對當前網頁的建議、問題反饋
售前咨詢
業務咨詢
電話:0933-790886或 0989-092892
郵箱:taiwan@fanruan.com
頁面反饋
*問題分類
不能為空
問題描述
0/1000
不能為空

反馈已提交

网络繁忙