地圖開啟資料點提示輪播

1.1 預期效果

某些場景下，希望地圖所有區域的資料可以輪播顯示，效果如下圖所示：

1.2 實現思路

獲取 圖表物件 後，呼叫方法chart.openAutoTooltip([delay, initPoints]);即可開啟資料點提示自動輪播。

• 方法中的delay為輪播間隔時間，initPoints為資料點集合。

• 如果不設定參數，直接呼叫chart.openAutoTooltip()，表示採用預設設定，輪播間隔為 3 秒，資料點集合為當前圖表下的所有資料點。

注：該API不支援擴展圖表。

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.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(); //鑽取時觸發超連結，實現輪播

3.5 效果預覽

4.1 普通地圖範例

點選下載範本：地圖開啟數據點提示輪播.frm

4.2 鑽取地圖範例

點選下載範本：鑽取地圖開啟數據點提示輪播.frm