反饋已提交

網絡繁忙

JS實現點擊按鈕轉移地圖中心點和鑽取

1. 概述

1.1 版本

報表伺服器版本

功能變動

11.0

-

11.0.2

開放官方API chart.drillUp(index)   、chart.getLayerIndex()

1.2 預期效果

使用鑽取地圖時,需要使用滑鼠手動操作進行地圖鑽取和中心點轉移。

現提供一個方法,元件中輸入經緯度後點選按鈕轉移中心點,選擇區域名後點選按鈕鑽取到該區域。效果如下圖所示:

2023-10-01_14-30-22.gif

1.3 實現思路

呼叫圖表相關API實現,API如下:

  • chart.panTo(loc)  //轉移位置

  • charts.drillDown(areas[i])   //下鑽到區域 

  • chart.getLayerIndex()   // 獲取當前鑽取層級,獲取的層級從0開始

  • chart.drillUp(index)  // 向上鑽取

注1:上述API均不支援行動端。

注2:上述API均不支援擴展圖表。

2. 決策報表範例

2.1 準備資料

點選設計器左上角「檔案>建立決策報表」,建立空白範本。

1)建立內建資料集 Embedded1,如下圖所示:

2)建立內建資料集 Embedded2,如下圖所示:

2.2 設計範本

向 body 中拖入「鑽取地圖」和「參數面板」,最終效果如下圖所示:

2.2.1 鑽取地圖設定

1)雙擊鑽取地圖,進入編輯狀態,型別選擇「區域地圖」,地圖邊框選擇「中國」,其餘設定可自行選擇。如下圖所示:

2)地圖資料選擇「各層級分別指定」,第 1 層綁定 Embedded1 的區域資料,第 2 層綁定 Embedded2 的市級資料。如下圖所示:

2.2.2 設定參數面板

1)選中參數面板 para,將「點選查詢前不顯示報表內容」取消勾選,否則地圖在點選「查詢」前不會顯示。如下圖所示:

2)將要使用的元件直接拖入參數面板,各元件設定及用途如下:

  • 拖入 3 個標籤元件,作提示文字使用。設定「屬性>元件值」分別為字串「經度」、「緯度」、「下鑽區域名」。

  • 拖入 2 個文字元件,預覽範本時用來輸入經度和緯度。分別設定「屬性>元件名稱」為「jingdu」、「weidu」。

  • 拖入 1 個下拉框元件,用來綁定地圖區域。設定「屬性>元件名稱」為「quyu」,綁定資料字典如下圖所示:

  • 拖入 2 個按鈕元件,按鈕名稱分別為「中心點行動」,「根據區域名下鑽」。

2.3 添加點選事件

2.3.1 中心點行動

選中「中心點行動」按鈕,添加一個點選事件,輸入 JavaScript 代碼:

var chart=FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0); //獲取圖表物件
var jingdu=_g().getParameterContainer().getWidgetByName("jingdu").getValue();//獲取經度文字框
var weidu=_g().getParameterContainer().getWidgetByName("weidu").getValue(); //獲取緯度文字框
var loc=[weidu*1,jingdu*1];
chart.panTo(loc); //根據經緯度行動中心點

注:11.0 決策報表舊自適應下需要使用 _g().getParameterContainer().getWidgetByName("textEditor0").getValue() 獲取元件值。

如下圖所示:

2.3.2 根據區域名下鑽

選中「根據區域名下鑽」按鈕,添加一個點選事件,輸入 JavaScript 代碼:

var chart=FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);//獲取圖表物件
var quyu=_g().getWidgetByName("quyu").getValue();//獲取下拉框元件的值
if (chart.getLayerIndex() > 0)
chart.drillUp(chart.getLayerIndex() - 1);// 若已經下鑽,點選其他區域需傳回上一層級後再次下鑽
var areas= [];
//根據區域下鑽
chart.series.forEach(ser => areas.push(...ser.points));
var len=areas.length;
for(var i=0;i<len;i++){
        if(areas[i].name==quyu){
                chart.drillDown(areas[i]);
                break;
        }
}

如下圖所示:

2.4 效果預覽

保存範本,點選「PC端預覽」,效果如 1.1 預期效果中所示。

注:不支援行動端。

3. 普通報表範例

在普通報表中,設定圖表和參數面板的方法是一致的。不同的是,在按鈕點選事件中,圖表物件以及呼叫參數元件的方法有所不同。

  • 圖表物件需換成圖表所在的儲存格,如 var chart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0); 

  • 普通報表中獲取參數面板元件時需呼叫參數面板API,如 var jingdu=_g().getParameterContainer().getWidgetByName("jingdu").getValue();

所以在普通報表中,「中心點行動」按鈕點選事件的 JavaScript 代碼如下:

var chart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0); //獲取圖表物件
var jingdu=_g().getParameterContainer().getWidgetByName("jingdu").getValue();//獲取經度文字框
var weidu=_g().getParameterContainer().getWidgetByName("weidu").getValue(); //獲取緯度文字框
var loc=[weidu*1,jingdu*1];
chart.panTo(loc); //根據經緯度行動中心點

「根據區域名下鑽」按鈕點選事件的 JavaScript 代碼如下:

var chart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0);//獲取圖表物件
var quyu=_g().getParameterContainer().getWidgetByName("quyu").getValue();//獲取下拉框元件的值
if (chart.getLayerIndex() > 0)
chart.drillUp(chart.getLayerIndex()- 1); // 若已經下鑽,點選其他區域需返回上一層級後再次下鑽
var areas= [];
//根據區域下鑽
chart.series.forEach(ser => areas.push(...ser.points));
var len=areas.length;
for(var i=0;i<len;i++){
        if(areas[i].name==quyu){
                chart.drillDown(areas[i]);
                break;
        }
}

普通報表分頁預覽效果如下圖所示:

2023-10-01_14-40-30.gif

注:不支援行動端。

4. 範本下載

附件列表


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

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

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

不再提示

10s後關閉

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

反馈已提交

网络繁忙