1. 概述
1.1 預期效果
某些場景下,希望地圖所有區域的資料可以輪播顯示,效果如下圖所示:
1.2 實現思路
獲取 圖表物件 後,呼叫方法chart.openAutoTooltip([delay, initPoints]);即可開啟資料點提示自動輪播。
方法中的delay為輪播間隔時間,initPoints為資料點集合。
如果不設定參數,直接呼叫chart.openAutoTooltip(),表示採用預設設定,輪播間隔為 3 秒,資料點集合為當前圖表下的所有資料點。
注:該API不支援擴展圖表。
2. 普通地圖範例
2.1 準備資料
建立決策報表,建立內建資料集 Embedded1,如下圖所示:
2.2 插入地圖
將地圖拖到決策報表中,編輯地圖,地圖類型選擇區域地圖,地圖邊框選擇安徽省,GIS圖層選擇無,如下圖所示:
2.3 綁定資料
屬性面板點選資料,綁定地圖資料,如下圖所示:
2.4 設定圖例
此處是對地圖區域的預覽顏色進行設定。
屬性面板點選樣式>系列,區間配置自訂最小值為0,最大值為200,自訂主題顏色,劃分階段修改為1,如下圖所示:
2.5 設定提示
此處修改提示資訊的背景樣式,提升提示清晰度。
屬性面板點選樣式>提示,勾選使用資料點提示,背景填充顏色選擇黑色,不透明度設定為50,如下圖所示:
2.6 修改懸浮顏色
滑鼠懸浮在地圖區域上會有高亮效果,地圖資料點提示輪播時也會顯示這個高亮效果,但是預設高亮效果不明顯,需要進行修改。
屬性面板選擇特效>條件顯示,給地圖新增一個懸浮顏色類型的條件屬性,自訂顏色後,將區域名和內建資料集欄位區域綁定,點選增加按鈕即可,如下圖所示:
2.7 新增事件
選中body,新增一個初始化後事件,如下圖所示:
JavaScript 程式碼如下:
setTimeout(function () {
//獲取圖表物件
var vanchart = FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);
//開啟資料點提示輪播,輪播間隔為1秒,作用於該系列下的所有資料點
vanchart.openAutoTooltip(1000, vanchart.series[0].points);
}, 3000);
2.8 設定報表背景
選中body,屬性下點選樣式編輯按鈕,修改決策報表的背景填充顏色為深藍色,如下圖所示:
2.9 效果預覽
儲存報表,點選PC端預覽,效果如1.1預期效果所示:
注:不支援行動端。
3. 鑽取地圖範例
3.1 準備資料
建立決策報表,建立內建資料集,如下圖所示:
注:這邊因跨資料取數問題,也就直接分了兩個資料集,供參考。
3.2 插入地圖
1)決策報表中插入報表塊和鑽取地圖,如下圖所示:
2)報表塊中有 2 個資料集的資料,所以要進行資料集聯動,設定下過濾條件,如下圖所示:
3.3 綁定資料
鑽取地圖新增需要的鑽取層級,將報表塊中處理好的儲存格資料新增至地圖儲存格資料集中,如下圖所示:
注:第 1 層和第 2 層都要設定,圖中只給了第 1 層的,別漏掉了。
3.4 新增事件
1)決策報表 body 新增初始化事件,如下圖所示:
JavaScript 程式碼如下:
setTimeout(function(){
var vanchart =FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0); //獲取圖表物件
vanchart.openAutoTooltip(); //開啟資料點提示輪播
},500)
2)在鑽取地圖特效>交互屬性下新增 JavaScript 類型的超級連結,如下圖所示:
JavaScript 程式碼如下:
FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0).openAutoTooltip(); //鑽取時觸發超連結,實現輪播