# 面積圖 面積圖又叫區域圖。它是在折線圖的基礎之上形成的, 它將折線圖中折線與自變量坐標軸之間的區域使用顏色或者紋理填充,這樣一個填充區域我們叫做面積,顏色的填充可以更好的突出趨勢信息。 # 基礎面積圖 面積圖用於估計數量隨時間而變化的程度,也可用於引起人們對總值趨勢的注意。他們最常用於表現趨勢和關係,而不是傳達特定的值。 ### 預覽圖 --- [![基礎面積圖.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/VBNiArBcaBKJH8cB-%E5%9F%BA%E7%A4%8E%E9%9D%A2%E7%A9%8D%E5%9C%96.png)](https://book.gosu.bar/uploads/images/gallery/2019-12/VBNiArBcaBKJH8cB-%E5%9F%BA%E7%A4%8E%E9%9D%A2%E7%A9%8D%E5%9C%96.png) ### 設定值 --- - #### 資料源 ``` [{ year: '1991', value: 15468 }, { year: '1992', value: 16100 }, { year: '1993', value: 15900 }, { year: '1994', value: 17409 }, { year: '1995', value: 17000 }, { year: '1996', value: 31056 }, { year: '1997', value: 31982 }, { year: '1998', value: 32040 }, { year: '1999', value: 33233 }] ``` - #### 內距 ``` 40,40, 60, 60 ``` - #### 比例尺 Scale ##### year 比例尺 ( X軸 )
列表設定值
欄位year
類型 linear
刻度間距1
優化數據範圍開啟
##### value 比例尺 ( Y軸 )
列表設定值
欄位value
類型linear
優化數據範圍開啟
最小值10000
最大值35000
格式化函數``` function formatter(val) {

return (val / 10000).toFixed(1) + 'k';

} ```
- #### 圖 Geom ##### 區域圖( area )
列表設定值
欄位year\*value
類型區域圖
##### 線圖( Line )
列表設定值
欄位year\*value
類型線圖
# 堆疊面積圖 和基本面積圖一樣,唯一的區別就是圖上每一個數據集的起點不同,起點是基於前一個數據集的,用於顯示每個數值所佔大小隨時間或類別變化的趨勢線,展示的是部分與整體的關係。 層疊面積圖上的最大的面積代表了所有的數據量的總和,是一個整體。各個疊起來的面積表示各個數據量的大小,這些堆疊起來的面積圖在表現大數據的總量分量的變化情況時格外有用,所以層疊面積圖不適用於表示帶有負值的數據集。非常適用於對比多變量隨時間變化的情況。 ### 預覽圖 --- [![堆疊面積圖.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/8wCkdqUd12wetXUo-%E5%A0%86%E7%96%8A%E9%9D%A2%E7%A9%8D%E5%9C%96.png)](https://book.gosu.bar/uploads/images/gallery/2019-12/8wCkdqUd12wetXUo-%E5%A0%86%E7%96%8A%E9%9D%A2%E7%A9%8D%E5%9C%96.png) ### 設定值 --- - #### 資料源 ``` [{ country: 'Asia', year: '1750', value: 502 }, { country: 'Asia', year: '1800', value: 635 }, { country: 'Asia', year: '1850', value: 809 }, { country: 'Asia', year: '1900', value: 5268 }, { country: 'Asia', year: '1950', value: 4400 }, { country: 'Asia', year: '1999', value: 3634 }, { country: 'Asia', year: '2050', value: 947 }, { country: 'Africa', year: '1750', value: 106 }, { country: 'Africa', year: '1800', value: 107 }, { country: 'Africa', year: '1850', value: 111 }, { country: 'Africa', year: '1900', value: 1766 }, { country: 'Africa', year: '1950', value: 221 }, { country: 'Africa', year: '1999', value: 767 }, { country: 'Africa', year: '2050', value: 133 }, { country: 'Europe', year: '1750', value: 163 }, { country: 'Europe', year: '1800', value: 203 }, { country: 'Europe', year: '1850', value: 276 }, { country: 'Europe', year: '1900', value: 628 }, { country: 'Europe', year: '1950', value: 547 }, { country: 'Europe', year: '1999', value: 729 }, { country: 'Europe', year: '2050', value: 408 }, { country: 'Oceania', year: '1750', value: 200 }, { country: 'Oceania', year: '1800', value: 200 }, { country: 'Oceania', year: '1850', value: 200 }, { country: 'Oceania', year: '1900', value: 460 }, { country: 'Oceania', year: '1950', value: 230 }, { country: 'Oceania', year: '1999', value: 300 }, { country: 'Oceania', year: '2050', value: 300 }] ``` - #### 內距 ``` 40,40, 80, 60 ``` - #### 比例尺 Scale #### year 比例尺 ( X軸 )
列表設定值
欄位year
類型 linear
刻度間距50
優化數據範圍開啟
- #### 圖 Geom ##### 區域圖( area )
列表設定值
欄位year\*value
類型區域圖
顏色欄位country
調整欄位堆疊 | stack
##### 線圖( Line )
列表設定值
欄位year\*value
類型線圖
顏色欄位 country
大小2
調整欄位 堆疊 | stack
- #### 圖示 Legend
列表設定值
啟用開啟
欄位country
位置
排版水平
# 區間面積圖 ### 預覽圖 --- [![區間面積圖.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/LpebWRjgwd8aLzD2-%E5%8D%80%E9%96%93%E9%9D%A2%E7%A9%8D%E5%9C%96.png)](https://book.gosu.bar/uploads/images/gallery/2019-12/LpebWRjgwd8aLzD2-%E5%8D%80%E9%96%93%E9%9D%A2%E7%A9%8D%E5%9C%96.png) ### 設定值 --- - #### 資料源 ``` [{ time: 1246406400000, constest: 21.5, temperature: [14.3, 27.7] }, { time: 1246492800000, constest: 22.1, temperature: [14.5, 27.8] }, { time: 1246579200000, constest: 23, temperature: [15.5, 29.6] }, { time: 1246665600000, constest: 23.8, temperature: [16.7, 30.7] }, { time: 1246752000000, constest: 21.4, temperature: [16.5, 25.0] }, { time: 1246838400000, constest: 21.3, temperature: [17.8, 25.7] }, { time: 1246924800000, constest: 18.3, temperature: [13.5, 24.8] }, { time: 1247011200000, constest: 15.4, temperature: [10.5, 21.4] }, { time: 1247097600000, constest: 16.4, temperature: [9.2, 23.8] }, { time: 1247184000000, constest: 17.7, temperature: [11.6, 21.8] }, { time: 1247270400000, constest: 17.5, temperature: [10.7, 23.7] }, { time: 1247356800000, constest: 17.6, temperature: [11.0, 23.3] }, { time: 1247443200000, constest: 17.7, temperature: [11.6, 23.7] }, { time: 1247529600000, constest: 16.8, temperature: [11.8, 20.7] }, { time: 1247616000000, constest: 17.7, temperature: [12.6, 22.4] }, { time: 1247702400000, constest: 16.3, temperature: [13.6, 19.6] }, { time: 1247788800000, constest: 17.8, temperature: [11.4, 22.6] }, { time: 1247875200000, constest: 18.1, temperature: [13.2, 25.0] }, { time: 1247961600000, constest: 17.2, temperature: [14.2, 21.6] }, { time: 1248048000000, constest: 14.4, temperature: [13.1, 17.1] }, { time: 1248134400000, constest: 13.7, temperature: [12.2, 15.5] }, { time: 1248220800000, constest: 15.7, temperature: [12.0, 20.8] }, { time: 1248307200000, constest: 14.6, temperature: [12.0, 17.1] }, { time: 1248393600000, constest: 15.3, temperature: [12.7, 18.3] }, { time: 1248480000000, constest: 15.3, temperature: [12.4, 19.4] }, { time: 1248566400000, constest: 15.8, temperature: [12.6, 19.9] }, { time: 1248652800000, constest: 15.2, temperature: [11.9, 20.2] }, { time: 1248739200000, constest: 14.8, temperature: [11.0, 19.3] }, { time: 1248825600000, constest: 14.4, temperature: [10.8, 17.8] }, { time: 1248912000000, constest: 15, temperature: [11.8, 18.5] }, { time: 1248998400000, constest: 13.6, temperature: [10.8, 16.1] }] ``` - #### 內距 ``` 40,40, 60, 60 ``` - #### 比例尺 Scale ##### time(X軸
列表設定值
欄位time
類型 time
優化數據範圍開啟
時間格式MM-DD
##### constest(Y軸 )
列表設定值
欄位constest
類型linear
優化數據範圍開啟
最小值5
最大值35
##### temperature( Y軸 )
列表設定值
欄位temperature
類型linear
優化數據範圍開啟
最小值5
最大值35
- #### 軸座標 Axis ##### constest( Y軸 )
列表設定值
欄位constest
啟用關閉
- #### 圖 Geom ##### 區域圖( area )
列表設定值
欄位time\*temperature
類型區域圖
##### 線圖( Line )
列表設定值
欄位time\*constest
類型線圖
大小2
##### 點圖( point )
列表設定值
欄位time\*constest
類型點圖
形狀circle
樣式 - 顏色\#ffffff
樣式 - 寬度1
# 片段面積圖 ### 預覽圖 --- [![片段面積圖.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/Sy0Uiv6oyhklKHFU-%E7%89%87%E6%AE%B5%E9%9D%A2%E7%A9%8D%E5%9C%96.png)](https://book.gosu.bar/uploads/images/gallery/2019-12/Sy0Uiv6oyhklKHFU-%E7%89%87%E6%AE%B5%E9%9D%A2%E7%A9%8D%E5%9C%96.png) ### 設定值 --- - #### 資料源 ``` [{ time: 1246406400000, constest: 21.5, temperature: [14.3, 27.7] }, { time: 1246492800000, constest: 22.1, temperature: [14.5, 27.8] }, { time: 1246579200000, constest: 23, temperature: [15.5, 29.6] }, { time: 1246665600000, constest: 23.8, temperature: [16.7, 30.7] }, { time: 1246752000000, constest: 21.4, temperature: [16.5, 25.0] }, { time: 1246838400000, constest: 21.3, temperature: [17.8, 25.7] }, { time: 1246924800000, constest: 18.3, temperature: [13.5, 24.8] }, { time: 1247011200000, constest: 15.4, temperature: [10.5, 21.4] }, { time: 1247097600000, constest: 16.4, temperature: [9.2, 23.8] }, { time: 1247184000000, constest: 17.7, temperature: [11.6, 21.8] }, { time: 1247270400000, constest: 17.5, temperature: [10.7, 23.7] }, { time: 1247356800000, constest: 17.6, temperature: [11.0, 23.3] }, { time: 1247443200000, constest: 17.7, temperature: [11.6, 23.7] }, { time: 1247529600000, constest: 16.8, temperature: [11.8, 20.7] }, { time: 1247616000000, constest: 17.7, temperature: [12.6, 22.4] }, { time: 1247702400000, constest: 16.3, temperature: [13.6, 19.6] }, { time: 1247788800000, constest: 17.8, temperature: [11.4, 22.6] }, { time: 1247875200000, constest: 18.1, temperature: [13.2, 25.0] }, { time: 1247961600000, constest: 17.2, temperature: [14.2, 21.6] }, { time: 1248048000000, constest: 14.4, temperature: [13.1, 17.1] }, { time: 1248134400000, constest: 13.7, temperature: [12.2, 15.5] }, { time: 1248220800000, constest: 15.7, temperature: [12.0, 20.8] }, { time: 1248307200000, constest: 14.6, temperature: [12.0, 17.1] }, { time: 1248393600000, constest: 15.3, temperature: [12.7, 18.3] }, { time: 1248480000000, constest: 15.3, temperature: [12.4, 19.4] }, { time: 1248566400000, constest: 15.8, temperature: [12.6, 19.9] }, { time: 1248652800000, constest: 15.2, temperature: [11.9, 20.2] }, { time: 1248739200000, constest: 14.8, temperature: [11.0, 19.3] }, { time: 1248825600000, constest: 14.4, temperature: [10.8, 17.8] }, { time: 1248912000000, constest: 15, temperature: [11.8, 18.5] }, { time: 1248998400000, constest: 13.6, temperature: [10.8, 16.1] }] ``` - #### 內距 ``` 40, 40, 80, 60 ``` - #### 前置處理函數 Transform ##### 字串展開( fold )
列表設定值
類型字串展開
要展開的欄位ACME,Compitor
保留欄位year
keytype
Valuevalue
- #### 比例尺 Scale ##### year( X軸 )
列表設定值
欄位year
類型linear
刻度間距1
優化數據範圍開啟
- #### 圖 Geom ##### 區域圖( area )
列表設定值
欄位year\*value
類型區域圖
顏色欄位 type
形狀smooth
##### 線圖( Line )
列表設定值
欄位year\*value
類型線圖
顏色欄位type
形狀smooth
大小2
- #### 圖示 Legend
列表設定值
啟用開啟
欄位type
位置
排版水平
# 正負面積圖 ### 預覽圖 --- [![正負面積圖.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/efs8UfZuZHqv7SyT-%E6%AD%A3%E8%B2%A0%E9%9D%A2%E7%A9%8D%E5%9C%96.png)](https://book.gosu.bar/uploads/images/gallery/2019-12/efs8UfZuZHqv7SyT-%E6%AD%A3%E8%B2%A0%E9%9D%A2%E7%A9%8D%E5%9C%96.png) ### 設定值 --- - #### 資料源 ``` [{ year: '1996', north: 322, south: 162 }, { year: '1997', north: 324, south: 90 }, { year: '1998', north: 329, south: 50 }, { year: '1999', north: 342, south: 77 }, { year: '2000', north: 348, south: 35 }, { year: '2001', north: 334, south: -45 }, { year: '2002', north: 325, south: -88 }, { year: '2003', north: 316, south: -120 }, { year: '2004', north: 318, south: -156 }, { year: '2005', north: 330, south: -123 }, { year: '2006', north: 355, south: -88 }, { year: '2007', north: 366, south: -66 }, { year: '2008', north: 337, south: -45 }, { year: '2009', north: 352, south: -29 }, { year: '2010', north: 377, south: -45 }, { year: '2011', north: 383, south: -88 }, { year: '2012', north: 344, south: -132 }, { year: '2013', north: 366, south: -146 }, { year: '2014', north: 389, south: -169 }, { year: '2015', north: 334, south: -184 }] ``` - #### 內距 ``` 40, 20, 80, 60 ``` - #### 前置處理函數 Transform ##### 字串展開( fold )
列表設定值
類型字串展開
要展開的欄位north,south
保留欄位year
keytype
Valuevalue
- #### 圖 Geom ##### 區域圖( area )
列表設定值
欄位year\*value
類型區域圖
顏色欄位 type
##### 線圖( Line )
列表設定值
欄位year\*value
類型線圖
顏色欄位type
大小2
- #### 圖示 Legend
列表設定值
啟用開啟
欄位value
位置
排版水平