範圍面積圖

1.1 問題描述

面積圖可設定為範圍顯示效果，如下圖所示：

1.2 實現思路

圖表新增條件屬性，透過設定系列的填充顏色和線型實現範圍面積效果，透過自訂 JS 實現標籤和提示效果。

2.1 設計範本

1）建立內建資料集 ds1，如下圖所示：

2）插入一個堆積面積圖：

3）圖表資料設定如下：

4）在圖表「特效>條件顯示」中新增一個條件屬性，設定如下：

當系列序號等於 1 時，填充顏色的不透明度為 0 。

5）在圖表「樣式>標籤」中，勾選使用標籤，自訂傳回內容。

function(){ 
 if(this.seriesName=="差值"){
 	return (this.points[0].value+this.points[1].value).toFixed(1);
 	};
 	return this.value;
}

6） 在圖表「樣式>提示」中，勾選「使用資料點提示」，自訂傳回內容。

程式碼如下：

function(){    
  var value="<font color='white'>"+this.category+"<br>最低："+this.points[0].value+"<br>最高："+(this.points[0].value+this.points[1].value).toFixed(1)+"</font>";
  return value;
}

2.2 效果預覽

2.2.1 PC 端

儲存報表，點選分頁預覽，效果如下圖所示：

2.2.2 行動端

同時支援 App 端和 H5 端，效果如下圖所示：

注：行動端標籤正常顯示，提示沒有顯示最高值，還是顯示差值。

點選下載範本：範圍面積圖.frm