# 圖像編輯器 - 圖表工具使用案例
讓您更了解圖像編輯器的圖表工具使用方式
# 圖表區塊工具列說明
# 資料、內距、更新預覽說明
## 總圖預覽
---
## 設定值
---
- ### 資料
繪製圖表的資料源（可程式化）
- ### 內距
邊與內容的距離
- - 上 , 右 ,下 , 左 （舉例：40 ,40 ,95 ,80）
- 上 , 左右 , 下 （舉例：40 ,60 ,80）
- 上下 , 左右 （舉例：80 ,60）
- 上右下左 （舉例：50）
- ### 更新預覽
將設定值重新繪製上圖表區塊（更新圖表區塊）
-
# 圖例 Legend
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/gSY7kkvdc99lKaKH-%E5%9C%96%E4%BE%8B.png)
#### 圖例 Legend - 設定值
##### 一般
- - 啟用
- ☑ 啟用圖示
- ☐ 不啟用圖示
-
- 自動換行
- ☑ 自動換行
- ☐ 不自動換行
-
- 欄位（填入資料變數來做圖示標準 - 必填欄位）
- 位置
- 上
- 左
- 右
- 下
- 排版
- 垂直（圖示以垂直呈現）
- 水平（圖示以水平呈現）
- 水平偏移量
- 往右偏移為 正
- 往左偏移為 負
- 舉例: 30 （往右偏移 30px ）
- 垂直偏移量
- 往下偏移為 正
- 往上偏移為 負
- 舉例: -30 （往上偏移 30px）
- 圖示 （呈現圖示的樣式）
- 水平間距 （圖示左右間距）
- 垂直間距 （圖示上下間距）
- 寬度 （圖示寬度）
##### 文字樣式
- - 對齊 （字體對齊方向）
- 顏色 （字體顏色）
- 大小 （字體大小）
- 粗體 （字體粗細）
- 旋轉 （字體旋轉）
- 基準線
##### 標題
- - 啟用
- ☑ 啟用
- ☐ 不啟用
- 對齊（標題對齊方向）
- 顏色（標題顏色）
- 大小（標題大小）
- 粗體（標題粗細）
- 旋轉（旋轉角度）
- 基準線
##### 背景
- - 填滿顏色（背景顏色）
- 透明度（背景透明度）
- 邊框顏色（邊框顏色）
- 邊框透明色（邊框透明色）
- 邊框粗細（邊框粗細寬度）
- 圓角大小
- 整體透明度
# 極座標 Coord
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/PiqzDDb5OTiX1kjq-%E6%A5%B5%E5%BA%A7%E6%A8%99.png)
### 極座標 Coord - 設定值
---
- ##### **類型**
- - 直角坐標系（例如：折線圖、柱狀圖）
- 極坐標系（例如：雷達圖、玫瑰圖）
- 圓餅圖
- 螺旋坐標系
- ##### **起始角度**
- ##### **結束角度**
- ##### **空心圓半徑（ 設定值 0 ~ 1 ）**
- ##### **實心圓半徑（ 設定值 0 ~ 1 ）**
- ##### **反轉（反轉X 或 Y 的起始、結束值reflect）**
- - X
- Y
- ##### **轉置（轉置X軸和Y軸 ，預設值 false）**
-
# 前置處理函數 Transform
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/H60iIS6Ttnkw08hu-%E5%89%8D%E7%BD%AE%E8%99%95%E7%90%86%E5%87%BD%E6%95%B8.png)
### 前置處理函數 Transform - 設定值
---
#### **類型**
- ##### **數據過濾**
- ##### **數據加工**
- ##### **字串過濾**
- ##### **字串重新命名**
- ##### **逆序排列**
- ##### **數據排序**
- ##### **按字串排序**
- ##### **獲取子集**
- ##### **數據分組**
- ##### **補全行**
- ##### **補全列、字串**
- ##### **字串展開**
-
# 比例尺 Scale
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/9HXS380m7Y5f9wiK-%E6%AF%94%E4%BE%8B%E5%B0%BA.png)
### 比例尺 Scale - 設定值
---
- #### **欄位** （填入欄位值來做比例尺設定）
- #### **類型**
| 類型 | 說明 | 舉例 |
| linear | 連續的數值 | \[1 ,2 ,3 ,4 ,5\]
|
| log | 連續非線性的Log數據 | 將 \[1,10,100,1000\] 轉換成 \[0,1,2,3\] |
| power | 連續非線性的pow數據 | 將 \[2,4,8,16,32\] 轉換成 \[1,2,3,4,5\] |
| cat | 分類 | \[ '男' , '女' \] |
| time | 連續的時間類型 | 股票時間 |
| timeCat | 非連續的時間 | 股票時間 |
[](https://book.gosu.bar/uploads/images/gallery/2019-12/DMjHOUHMbf34HwNW-timeCat_And_time.png)
- #### **範圍**（與起始點的間距，資料顯示的長度(後-前)）
##### 範圍0 ~ 1 ，格式： 0,1 ，舉例：0.2~0.8
- #### **別名**（該數據字段的顯示別名，一般用於將字段的英文名稱轉換成中文名）
- #### **刻度值**（ 刻度數量、刻度間距、刻度內容 **三擇一設定**，若設定到兩項以**下方的項目為主**）
- ##### 刻度數量 （幾個刻度數量，輸入後會自動優化數量）
- ##### 刻度間距 （刻度與刻度之間的距離,若**類型為 time 和 timeCat 以秒為單位**，例如：86400）
- ##### 刻度內容 （直接設定刻度內容）
- #### **優化數據範圍** （☑ 優化數據範圍，☐ 不優化 ）
- #### **最小值** （比例尺的最小值）
- #### **最大值** （比例尺的最大值）
- #### **log基數**
- #### **指數**
- #### **分類值 （cat 限定）**
- #### **時間格式（time 和 timeCat 限定）**
- ##### YYYY （西元年分）
- ##### MM （月份 , 01 ~ 12，4個M = 英文全稱 , 3個M = 英文縮寫）
- ##### DD （日期 ,01 ~ 31 ）
- ##### ddd （星期 , 一 ~ 七，4個d = 英文全稱 , 3個d = 英文縮寫）
- ##### HH （小時 , 0 ~ 24）
- ##### mm （分鐘 , 0 ~ 59）
- ##### ss （秒鐘 , 0 ~ 59）
- ##### sss （毫秒 , 0 ~ 999）
##### 範例：YYYY-MM-DD(ddd)
結果：2018-01-01(MON)
- #### **格式化函數** （程式化比例尺上的數值，例如：千分位）
# 軸座標 Axis
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/cuuweWrkG7GMJArt-%E8%BB%B8%E5%BA%A7%E6%A8%99.png)
### 軸座標 Axis - 設定值
---
#### **一般**
☑ 開啟軸線
☐ 隱藏軸線，所有效果都會隱藏掉
- ##### 欄位 （以哪個欄位作為軸座標基準值）
- ##### 顯示位置
- left
- right
- top
- bottom
#### **軸線**
- ##### 顏色 （軸座標線的顏色）
- ##### 透明度 （軸座標線的透明度）
- ##### 虛線間距 （虛線的間距若不填為實線，例如 3 , 2 , 1 ）
- ##### 寬度 （軸線的寬度）
- #### 與軸線間距 （文字與軸座標的間距）
- #### 格式化輸出函數 （將標籤的顯示的樣式程式化）
- #### 自動旋轉
- ####
文字樣式
- #####
對齊
- 置左
- 置中
- 置右
- #####
顏色（文字顏色）
- #####
大小（文字大小）
- #####
粗體
- 一般（預設值）
- 粗體
- #####
旋轉（旋轉角度，若有自動旋轉，會再加上自動旋轉的角度）
- #####
基準線
- 上
- 中
- 下
- #####
位置
- #####
間距
- #####
自動旋轉
- #####
文字樣式
- 對齊
- 顏色
- 大小
- 粗體
- 旋轉
- 基準線
- 顏色 （刻度線的顏色）
- 透明度 （刻度線的透明度）
- 寬度 （刻度線的寬度）
- 長度 （刻度線的長度）
- 數量 （次刻度的數量）
- 顏色 （次刻度的顏色）
- 透明度 （次刻度的透明度）
- 寬度 （次刻度的寬度）
- 長度 （次刻度的長度）
- #####
**類型**
-
**線**（線條樣式）
-
顏色
-
透明度
-
虛線間距
-
寬度
-
**矩形**
- 矩形顏色
- #####
**隱藏第一行**
- ##### **隱藏最後一行**
☑ 隱藏
☐ 不隱藏
# 圖 Geom
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/9rf43XfSEKGolXn0-%E5%9C%96.png)
### 圖 Geom - 設定值
---
- ####
**欄位**
- 填入的數值來做繪圖
- 一個值, 大多用來繪製圓餅圖
- 兩個值, X軸與Y軸類型的圖表
- 三個以上, 多邊形圖表
- 例如：number\*name
- ####
**類型**
| 類型
| 說明
|
| 點圖
| 
|
| 路徑圖
| 
雙向繪出，左右來回皆可
|
| 線圖
| 
單向繪出，從左至右繪出
|
| 區域圖
| 
|
| 多邊形
| 
|
| K線圖
| 
|
| 樹狀圖
| 
|
| 熱力圖
| 
|
- ####
**顏色**（圖表內容的顏色）
- 顏色欄位 （可填入變數，來做顏色區分）
- 顏色參數
#####
`填入色碼，若多個顏色變數皆可調整，若為空有預設值，例如：#333333,#000000,#ffffff`
- ####
**形狀**
- ##### 形狀欄位 (可填入變數，來做形狀區分)
- ##### 形狀參數
#####
`填入下方樣式參數，若多個形狀變數皆可調整，若為空有預設值，例如：circle,square,diamond`
- ####
**大小**
- ##### 大小欄位 （可填入變數，來做大小區分）
- ##### 大小參數
##### `填入數字，若多個變數值皆可調整，若為空有預設值例如：2,3,5`
- ####
**透明度**
- #####
透明度欄位（可填入變數，來做透明度區分）
- #####
透明度參數
`填入0 ~ 1，若透明度欄位為空,不會有預設值，若多個變數值皆可調整，為空有預設值，例如：0.2,0.6,0.8 `
- ####
**調整欄位**（圖表呈現類型）
- ####
**DodgeRatio**（調整欄位 - 分組專用）
- 用來調整分組各柱是否重疊
- 與 MarginRatio 相互影響
- 若為0 會疊再一起
- 若為空值，有預設值
- ####
**MarginRatio**（調整欄位 - 分組專用）
- 用來調整分組各柱之間的間距
- 範圍值：0 ~ 1
- 若為空值，有預設值
| 列表 | 設定值 |
| 欄位 | year
|
| 類型 | linear |
| 刻度間距 | 1 |
| 優化數據範圍 | 開啟 |
#####
##### Value 比例尺（ Y軸 ）
| 列表 | 設定值 |
| 欄位 | value |
| 類型
| linear |
| 刻度間距 | 1 |
| 最小值 | 0 |
| 最大值 | 13 |
| 優化數據範圍 | 開啟 |
- #### 圖 Geom
##### 線圖（ Line ）
##### 點圖（ point ）
| 列表 | 設定值 |
| 欄位 | year\*value |
| 類型 | 點圖 |
| 形狀 | circle |
| 大小 | 4 |
| 樣式 - 顏色 | \#ffffff |
| 顏色 - 寬度 | 1 |
# 多條折線圖
雙折線圖，用於比對兩組數據的趨勢。
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/7Bv3MEjS1R2N9o8D-%E5%A4%9A%E6%A2%9D%E6%8A%98%E7%B7%9A%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
"month": "Jan",
"city": "Tokyo",
"temperature": 7
}, {
"month": "Jan",
"city": "London",
"temperature": 3.9
}, {
"month": "Feb",
"city": "Tokyo",
"temperature": 6.9
}, {
"month": "Feb",
"city": "London",
"temperature": 4.2
}, {
"month": "Mar",
"city": "Tokyo",
"temperature": 9.5
}, {
"month": "Mar",
"city": "London",
"temperature": 5.7
}, {
"month": "Apr",
"city": "Tokyo",
"temperature": 14.5
}, {
"month": "Apr",
"city": "London",
"temperature": 8.5
}, {
"month": "May",
"city": "Tokyo",
"temperature": 18.4
}, {
"month": "May",
"city": "London",
"temperature": 11.9
}, {
"month": "Jun",
"city": "Tokyo",
"temperature": 21.5
}, {
"month": "Jun",
"city": "London",
"temperature": 15.2
}, {
"month": "Jul",
"city": "Tokyo",
"temperature": 25.2
}, {
"month": "Jul",
"city": "London",
"temperature": 17
}, {
"month": "Aug",
"city": "Tokyo",
"temperature": 26.5
}, {
"month": "Aug",
"city": "London",
"temperature": 16.6
}, {
"month": "Sep",
"city": "Tokyo",
"temperature": 23.3
}, {
"month": "Sep",
"city": "London",
"temperature": 14.2
}, {
"month": "Oct",
"city": "Tokyo",
"temperature": 18.3
}, {
"month": "Oct",
"city": "London",
"temperature": 10.3
}, {
"month": "Nov",
"city": "Tokyo",
"temperature": 13.9
}, {
"month": "Nov",
"city": "London",
"temperature": 6.6
}, {
"month": "Dec",
"city": "Tokyo",
"temperature": 9.6
}, {
"month": "Dec",
"city": "London",
"temperature": 4.8
}]
```
- #### 內距
```
40,20,50,50
```
- #### 比例尺 Scale
##### temperature 比例尺 （ X軸 ）
| 列表 | 設定值 |
| 欄位 | temperature
|
| 類型
| linear |
| 優化數據範圍 | 開啟 |
| 最小值 | 0 |
| 格式化函數 | `function(val) { return val + '°C'; }` |
- #### 圖 Geom
##### 點圖（ point ）
| 列表 | 設定值 |
| 欄位 | month\*temperature |
| 類型 | 點圖 |
| 顏色欄位 | city |
| 形狀 | circle |
| 大小 | 4 |
| 樣式 - 顏色 | \#ffffff
|
| 樣式 - 寬度 | 1 |
##### 線圖（ Line ）
| 列表 | 設定值 |
| 欄位 | month\*temperature |
| 類型 | 線圖 |
| 顏色欄位 | city
|
# 曲形折線圖
雙折線圖，用於比對兩組數據的趨勢。
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/usPa4qDJLILqVohZ-%E6%9B%B2%E5%BD%A2%E6%8A%98%E7%B7%9A%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
"month": "Jan",
"city": "Tokyo",
"temperature": 7
}, {
"month": "Jan",
"city": "London",
"temperature": 3.9
}, {
"month": "Feb",
"city": "Tokyo",
"temperature": 6.9
}, {
"month": "Feb",
"city": "London",
"temperature": 4.2
}, {
"month": "Mar",
"city": "Tokyo",
"temperature": 9.5
}, {
"month": "Mar",
"city": "London",
"temperature": 5.7
}, {
"month": "Apr",
"city": "Tokyo",
"temperature": 14.5
}, {
"month": "Apr",
"city": "London",
"temperature": 8.5
}, {
"month": "May",
"city": "Tokyo",
"temperature": 18.4
}, {
"month": "May",
"city": "London",
"temperature": 11.9
}, {
"month": "Jun",
"city": "Tokyo",
"temperature": 21.5
}, {
"month": "Jun",
"city": "London",
"temperature": 15.2
}, {
"month": "Jul",
"city": "Tokyo",
"temperature": 25.2
}, {
"month": "Jul",
"city": "London",
"temperature": 17
}, {
"month": "Aug",
"city": "Tokyo",
"temperature": 26.5
}, {
"month": "Aug",
"city": "London",
"temperature": 16.6
}, {
"month": "Sep",
"city": "Tokyo",
"temperature": 23.3
}, {
"month": "Sep",
"city": "London",
"temperature": 14.2
}, {
"month": "Oct",
"city": "Tokyo",
"temperature": 18.3
}, {
"month": "Oct",
"city": "London",
"temperature": 10.3
}, {
"month": "Nov",
"city": "Tokyo",
"temperature": 13.9
}, {
"month": "Nov",
"city": "London",
"temperature": 6.6
}, {
"month": "Dec",
"city": "Tokyo",
"temperature": 9.6
}, {
"month": "Dec",
"city": "London",
"temperature": 4.8
}]
```
- #### 內距
```
40,20,50,50
```
- #### 比例尺Scale
##### temperature 比例尺（ X軸 ）
| 列表 | 設定值 |
| 欄位 | temperature
|
| 類型 | linear |
| 優化數據範圍 | 開啟 |
| 最小值 | 0 |
| 格式化函數 | function (val) { return val + '°C'; } |
#####
- #### 圖 Geom
##### 線圖（ Line ）
| 列表 | 設定值 |
| 欄位
| month\*temperature |
| 類型 | 線圖 |
| 顏色欄位 | city |
| 形狀 | smooth |
##### 點圖（ point ）
| 列表 | 設定值 |
| 欄位 | month\*temperature
|
| 類型 | 點圖 |
| 顏色欄位
| city
|
| 形狀 | circle |
| 大小 | 4 |
| 樣式 - 顏色 | \#ffffff |
| 顏色 - 寬度 | 1 |
# 階梯折線圖
階梯線圖（也稱為步驟圖）是與線圖相似的圖表，但是線在數據點之間形成分段步驟。當您要顯示以不規則間隔發生的更改時，分階線圖可能 很有用。例如，奶製品價格上漲，汽油，稅率，利率等。
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/sDBxcnTsCCbE5UUe-%E9%9A%8E%E6%A2%AF%E6%8A%98%E7%B7%9A%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
month: 'Jan',
value: 51
}, {
month: 'Feb',
value: 91
}, {
month: 'Mar',
value: 34
}, {
month: 'Apr',
value: 47
}, {
month: 'May',
value: 63
}, {
month: 'June',
value: 58
}, {
month: 'July',
value: 56
}, {
month: 'Aug',
value: 77
}, {
month: 'Sep',
value: 99
}, {
month: 'Oct',
value: 106
}, {
month: 'Nov',
value: 88
}, {
month: 'Dec',
value: 56
}];
```
- #### 內距
```
40,40,60,60
```
- #### 比例尺 Scale
##### month 比例尺 （ X軸 ）
| 列表 | 設定值 |
| 欄位 | month |
| 類型 | cat |
| 優化數據範圍 | 開啟 |
##### value 比例尺 （ Y軸 ）
| 列表 | 設定值 |
| 欄位 | value |
| 類型 | linear |
| 刻度間距 | 10 |
| 優化數據範圍 | 開啟 |
| 最小值 | 30 |
| 最大值 | 110 |
- #### 圖 Geom
##### 點圖（ point ）
| 列表 | 設定值 |
| 欄位 | month\*value |
| 類型 | 點圖 |
| 形狀 | circle |
| 樣式 - 顏色 | \#ffffff |
| 樣式 - 寬度 | 1 |
##### 線圖（ Line ）
| 列表 | 設定值 |
| 欄位 | month\*value |
| 類型 | 線圖 |
| 形狀 | hv |
# 多條階梯折線圖
階梯線圖（也稱為步驟圖）是與線圖相似的圖表，但是線在數據點之間形成分段步驟。當您要顯示以不規則間隔發生的更改時，分階線圖可能 很有用。例如，奶製品價格上漲，汽油，稅率，利率等。
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/3cvHtpmVo5P3PhYk-%E5%A4%9A%E6%A2%9D%E9%9A%8E%E6%A2%AF%E6%8A%98%E7%B7%9A%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
"month": "Jan",
"key": "series1",
"value": 125
}, {
"month": "Jan",
"key": "series2",
"value": 51
}, {
"month": "Feb",
"key": "series1",
"value": 132
}, {
"month": "Feb",
"key": "series2",
"value": 91
}, {
"month": "Mar",
"key": "series1",
"value": 141
}, {
"month": "Mar",
"key": "series2",
"value": 34
}, {
"month": "Apr",
"key": "series1",
"value": 158
}, {
"month": "Apr",
"key": "series2",
"value": 47
}, {
"month": "May",
"key": "series1",
"value": 133
}, {
"month": "May",
"key": "series2",
"value": 63
}, {
"month": "June",
"key": "series1",
"value": 143
}, {
"month": "June",
"key": "series2",
"value": 58
}, {
"month": "July",
"key": "series1",
"value": 176
}, {
"month": "July",
"key": "series2",
"value": 56
}, {
"month": "Aug",
"key": "series1",
"value": 194
}, {
"month": "Aug",
"key": "series2",
"value": 77
}, {
"month": "Sep",
"key": "series1",
"value": 115
}, {
"month": "Sep",
"key": "series2",
"value": 99
}, {
"month": "Oct",
"key": "series1",
"value": 134
}, {
"month": "Oct",
"key": "series2",
"value": 106
}, {
"month": "Nov",
"key": "series1",
"value": 110
}, {
"month": "Nov",
"key": "series2",
"value": 88
}, {
"month": "Dec",
"key": "series1",
"value": 91
}, {
"month": "Dec",
"key": "series2",
"value": 56
}]
```
- #### 內距
```
40,40,60,60
```
- #### 圖 Geom
##### 線圖（ Line ）
| 列表 | 設定值 |
| 欄位 | month\*value |
| 類型 | 線圖 |
| 顏色欄位 | key |
| 形狀 | hv |
# 柱狀圖
基礎柱狀圖，使用垂直的柱子顯示類別之間的數值比較。其中一個軸表示需要對比的分類尺寸，另一個軸代表相應的數值。
# 基礎柱狀圖
柱狀圖有別於直方圖，柱狀圖無法顯示數據在一個區間內的連續變化趨勢。柱狀圖描述的是分類數據，回答的是每一個分類中“有多少？”這個問題。需要注意的是， 當柱狀圖顯示的分類很多時會導致分類名附加等顯示問題。
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/ZoGIGApzBv8w8V94-%E5%9F%BA%E7%A4%8E%E6%9F%B1%E7%8B%80%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
year: '1951 年',
sales: 38
}, {
year: '1952 年',
sales: 52
}, {
year: '1956 年',
sales: 61
}, {
year: '1957 年',
sales: 145
}, {
year: '1958 年',
sales: 48
}, {
year: '1959 年',
sales: 38
}, {
year: '1960 年',
sales: 38
}, {
year: '1962 年',
sales: 38
}]
```
- #### 內距
```
40,40,60,60
```
- #### 圖 Geom
##### 柱狀圖（ interval ）
# 分組柱狀圖
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/xVC7atGZ8rmqz1no-%E5%88%86%E7%B5%84%E6%9F%B1%E7%8B%80%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
"name": "London",
"月份": "Jan.",
"月均降雨量": 18.9
}, {
"name": "London",
"月份": "Feb.",
"月均降雨量": 28.8
}, {
"name": "London",
"月份": "Mar.",
"月均降雨量": 39.3
}, {
"name": "London",
"月份": "Apr.",
"月均降雨量": 81.4
}, {
"name": "London",
"月份": "May",
"月均降雨量": 47
}, {
"name": "London",
"月份": "Jun.",
"月均降雨量": 20.3
}, {
"name": "London",
"月份": "Jul.",
"月均降雨量": 24
}, {
"name": "London",
"月份": "Aug.",
"月均降雨量": 35.6
}, {
"name": "Berlin",
"月份": "Jan.",
"月均降雨量": 12.4
}, {
"name": "Berlin",
"月份": "Feb.",
"月均降雨量": 23.2
}, {
"name": "Berlin",
"月份": "Mar.",
"月均降雨量": 34.5
}, {
"name": "Berlin",
"月份": "Apr.",
"月均降雨量": 99.7
}, {
"name": "Berlin",
"月份": "May",
"月均降雨量": 52.6
}, {
"name": "Berlin",
"月份": "Jun.",
"月均降雨量": 35.5
}, {
"name": "Berlin",
"月份": "Jul.",
"月均降雨量": 37.4
}, {
"name": "Berlin",
"月份": "Aug.",
"月均降雨量": 42.4
}]
```
- #### 內距
```
40, 40, 100, 60
```
- #### 圖 Geom
##### 柱狀圖（ interval ）
| 列表 | 設定值 |
| 欄位 | 月份\*月均降雨量
|
| 類型 | 柱狀圖 |
| 顏色欄位 | name |
| 調整欄位 | 分組 | dodge |
| dodgeRatio | 0.5 |
| marginRatio | 0.1 |
- ##### 圖示 Legend
# 堆疊柱狀圖
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/EjZ46rpq3EPPfbA2-%E5%A0%86%E7%96%8A%E6%9F%B1%E7%8B%80%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
name: 'London',
'Jan.': 18.9,
'Feb.': 28.8,
'Mar.': 39.3,
'Apr.': 81.4,
'May': 47,
'Jun.': 20.3,
'Jul.': 24,
'Aug.': 35.6
}, {
name: 'Berlin',
'Jan.': 12.4,
'Feb.': 23.2,
'Mar.': 34.5,
'Apr.': 99.7,
'May': 52.6,
'Jun.': 35.5,
'Jul.': 37.4,
'Aug.': 42.4
}]
```
- #### 內距
```
40, 40, 100, 60
```
- #### 前置處理函數 Transform
##### 字串展開（fold）
| 列表 | 設定值 |
| 類型
| 字串展開 |
| 要展開的欄位 | `Jan.,Feb.,Mar.,Apr.,May,Jun.,Jul.,Aug.` |
| | name |
| key | key |
| value | value |
- #### 圖 Geom
##### 柱狀圖（ interval ）
| 列表 | 設定值 |
| 欄位 | key\*value |
| 類型 | 柱狀圖d |
| 顏色欄位 | name |
| 調整欄位 | 堆疊 | stack |
- #### 圖示 Legend
# 區間柱狀圖
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/7TQaL6Pb89K63dXk-%E5%8D%80%E9%96%93%E6%9F%B1%E7%8B%80%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
x: '分類一',
y: [76, 100]
}, {
x: '分類二',
y: [56, 108]
}, {
x: '分類三',
y: [38, 129]
}, {
x: '分類四',
y: [58, 155]
}, {
x: '分類五',
y: [45, 120]
}, {
x: '分類六',
y: [23, 99]
}, {
x: '分類七',
y: [18, 56]
}, {
x: '分類八',
y: [18, 34]
}]
```
- #### 內距
```
40, 40, 60, 60
```
- #### 圖 Geom
##### 柱狀圖（ interval ）
# 基礎條形圖
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/04Mnvide5ARHMEG3-%E5%9F%BA%E7%A4%8E%E6%A2%9D%E5%BD%A2%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
country: '巴西',
population: 18203
}, {
country: '印尼',
population: 23489
}, {
country: '美国',
population: 29034
}, {
country: '印度',
population: 104970
}, {
country: '中国',
population: 131744
}]
```
- #### 內距
```
40, 60, 60, 70
```
- #### 圖 Geom
##### 柱狀圖（ interval ）
| 列表 | 設定值 |
| 欄位 | country\*population
|
| 類型 | 柱狀圖 |
- #### 極坐標 Coord
# 分組條形圖
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/nhhu8g39uzNRsxYc-%E5%88%86%E7%B5%84%E6%A2%9D%E5%BD%A2%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
"label": "Mon.",
"type": "series1",
"value": 2800
}, {
"label": "Mon.",
"type": "series2",
"value": 2260
}, {
"label": "Tues.",
"type": "series1",
"value": 1800
}, {
"label": "Tues.",
"type": "series2",
"value": 1300
}, {
"label": "Wed.",
"type": "series1",
"value": 950
}, {
"label": "Wed.",
"type": "series2",
"value": 900
}, {
"label": "Thur.",
"type": "series1",
"value": 500
}, {
"label": "Thur.",
"type": "series2",
"value": 390
}, {
"label": "Fri.",
"type": "series1",
"value": 170
}, {
"label": "Fri.",
"type": "series2",
"value": 100
}]
```
- #### 內距
```
40, 60, 80, 70
```
- #### 軸座標 Axis
##### value（Y軸）
- #### 圖 Geom
##### 柱狀圖（ interval ）
| 列表 | 設定值 |
| 欄位 | label\*value
|
| 類型 | 柱狀圖 |
| 顏色欄位 | type
|
| 調整欄位 | 分組 | dodge |
| dodgeRatio | 0.35
|
| marginRatio | 0.5 |
- #### 圖示 Legend
- #### 極坐標 Coord
# 堆疊條形圖
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/cIIEgCGpWwXCU8S7-%E5%A0%86%E7%96%8A%E6%A2%9D%E5%BD%A2%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
'State': 'WY',
'小於5歲': 25635,
'5至13歲': 1890,
'14至17歲': 9314
}, {
'State': 'DC',
'小於5歲': 30352,
'5至13歲': 20439,
'14至17歲': 10225
}, {
'State': 'VT',
'小於5歲': 38253,
'5至13歲': 42538,
'14至17歲': 15757
}, {
'State': 'ND',
'小於5歲': 51896,
'5至13歲': 67358,
'14至17歲': 18794
}, {
'State': 'AK',
'小於5歲': 72083,
'5至13歲': 85640,
'14至17歲': 22153
}]
```
- #### 內距
```
40, 60, 80, 70
```
- #### 前置處理函數 Transform
##### 字串展開（fold）
| 列表 | 設定值 |
| 類型 | 字串展開 |
| 要展開的欄位 | `小於5歲,5至13歲,14至17歲` |
| 保留欄位 | State |
| key | 年齡段 |
| value | 人口數量 |
- #### 圖 Geom
##### 柱狀圖（ interval ）
| 列表 | 設定值 |
| 欄位 | State\*人口數量
|
| 類型 | 柱狀圖 |
| 顏色欄位 | 年齡段
|
| 調整欄位 | 堆疊 | stack |
- #### 圖示 Legend
- #### 極坐標 Coord
# 區間條形圖
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/Qf3yFXtgGCo0deco-%E5%8D%80%E9%96%93%E6%A2%9D%E5%BD%A2%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
profession: '兩年制副學士學位',
highest: 110000,
minimum: 23000,
mean: 56636
}, {
profession: '執法與救火',
highest: 120000,
minimum: 18000,
mean: 66625
}, {
profession: '教育學',
highest: 125000,
minimum: 24000,
mean: 72536
}, {
profession: '心理學',
highest: 130000,
minimum: 22500,
mean: 75256
}, {
profession: '計算機科學',
highest: 131000,
minimum: 23000,
mean: 77031
}]
```
- #### 內距
```
20, 80, 50, 150
```
- #### 前置處理函數 Transform
##### 數據加工（map）
| 列表 | 設定值 |
| 類型 | 數據加工 |
| 加工函數 | ```
function callback(row) {
row.range = [row.minimum, row.highest];
return row;
}
```
|
- #### 圖 Geom
##### 柱狀圖（ interval ）
| 列表 | 設定值 |
| 欄位 | profession\*range
|
| 類型 | 柱狀圖 |
- #### 極坐標 Coord
# 圓餅圖
餅圖通過將一個圓餅按照分類的佔比劃分成多個區塊，整個圓餅代表 數據的總計，每個區塊鏈（圓弧）表示該分類占總體的比例大小，所有區塊鏈（圓弧）的加和等於100％。可以很好地幫助用戶快速了解數據的佔比分配。
# 基礎圓餅圖
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/J5S36Cr3Qy9iEVVb-%E5%9F%BA%E7%A4%8E%E5%9C%93%E9%A4%85%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
item: '事例一',
count: 40,
percent: 0.4
}, {
item: '事例二',
count: 21,
percent: 0.21
}, {
item: '事例三',
count: 17,
percent: 0.17
}, {
item: '事例四',
count: 13,
percent: 0.13
}, {
item: '事例五',
count: 9,
percent: 0.09
}]
```
- #### 內距
```
20, 20, 50, 20
```
- #### 圖 Geom
##### 柱狀圖（ interval ）
| 列表 | 設定值 |
| 欄位 | count
|
| 類型 | 柱狀圖 |
| 顏色欄位 | item
|
| 調整欄位 | 堆疊 | stack |
| 樣式 - 顏色 | \#ffffff |
| 樣式 - 寬度 | 2 |
- #### 圖示 Legend
| 列表 | 設定值 |
| 啟用 | 開啟 |
| 欄位 | count |
| 位置 | 下 |
| 排版 | 水平 |
| 垂直偏移量 | -40 |
- #### 極坐標 Coord
# 基礎圓環圖
環圖，其本質是餅圖將中間區域挖空。
餅圖的整體性太強，我們會將注意力集中在比較餅圖內各個扇形之間佔整體比重的關係。但如果我們將兩個餅圖放在一起，餅圖很難同時對比兩個圖。環圖在解決上述問題時，採用了讓我們更關注長度而不是面積的做法。這樣我們就能相對簡單的對比不同的環圖。同時環圖相對於餅圖空間的利用率更高，比如我們可以使用它的空心區域顯示文本信息，比如標題等。
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/bN9Ydq3cTyQR2zW9-%E5%9F%BA%E7%A4%8E%E5%9C%93%E7%92%B0%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
item: '事例一',
count: 40,
percent: 0.4
}, {
item: '事例二',
count: 21,
percent: 0.21
}, {
item: '事例三',
count: 17,
percent: 0.17
}, {
item: '事例四',
count: 13,
percent: 0.13
}, {
item: '事例五',
count: 9,
percent: 0.09
}]
```
- #### 內距
```
20, 20, 50, 20
```
- #### 圖 Geom
##### 柱狀圖（ interval ）
| 列表 | 設定值 |
| 欄位 | count
|
| 類型 | 柱狀圖 |
| 顏色欄位 | item
|
| 調整欄位 | 堆疊 | stack |
| 樣式 - 顏色 | \#ffffff |
| 樣式 - 寬度 | 2 |
- #### 圖示 Legend
| 列表 | 設定值 |
| 啟用 | 開啟 |
| 欄位 | count |
| 位置 | 下 |
| 排版 | 水平 |
| 垂直偏移量 | -40 |
- #### 極坐標 Coord
# 單色南丁格爾玫瑰圖
南丁格爾玫瑰圖，又名雞冠花圖、極坐標區域圖，是南丁格爾在克里米亞戰爭期間提交的一份關於士兵死傷的報告時發明的一種圖表,是在極坐標下繪製的柱狀圖，使用圓弧的半徑長短表示數據的大小（數量的多少）。
由於半徑和面積的關係是平方的關係，南丁格爾玫瑰圖會將數據的比例大小誇大，尤其適合對比大小相近的數值；由於圓形有周期的特性，所以玫瑰圖也適用於表示一個週期內的時間概念，比如星期、月份。
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/8sWkFsNW586LdBYk-%E5%96%AE%E8%89%B2%E5%8D%97%E4%B8%81%E6%A0%BC%E7%88%BE%E7%8E%AB%E7%91%B0%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
year: '2001',
population: 41.8
}, {
year: '2002',
population: 38
}, {
year: '2003',
population: 33.7
}, {
year: '2004',
population: 30.7
}, {
year: '2005',
population: 25.8
}, {
year: '2006',
population: 31.7
}, {
year: '2007',
population: 33
}, {
year: '2008',
population: 46
}, {
year: '2009',
population: 38.3
}, {
year: '2010',
population: 28
}, {
year: '2011',
population: 42.5
}, {
year: '2012',
population: 30.3
}]
```
- #### 內距
```
60, 40, 60, 50
```
- #### 軸座標 Axis
##### population（ Y軸 ）
- #### 圖 Geom
##### 柱狀圖（ interval ）
| 列表 | 設定值 |
| 欄位 | year\*population
|
| 類型 | 柱狀圖 |
| 樣式 - 顏色 | \#ffffff |
| 樣式 - 寬度 | 2 |
- #### 極坐標 Coord
# 多色南丁格爾玫瑰圖
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/Jg30Ykq35EmiHNCN-%E5%A4%9A%E8%89%B2%E5%8D%97%E4%B8%81%E6%A0%BC%E7%88%BE%E7%8E%AB%E7%91%B0%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
year: '2001',
population: 41.8
}, {
year: '2002',
population: 38
}, {
year: '2003',
population: 33.7
}, {
year: '2004',
population: 30.7
}, {
year: '2005',
population: 25.8
}, {
year: '2006',
population: 31.7
}, {
year: '2007',
population: 33
}, {
year: '2008',
population: 46
}, {
year: '2009',
population: 38.3
}, {
year: '2010',
population: 28
}, {
year: '2011',
population: 42.5
}, {
year: '2012',
population: 30.3
}]
```
- #### 內距
```
0
```
- #### 軸座標 Axis
##### population（ Y軸 ）
##### year（ X軸 ）
- #### 圖 Geom
##### 柱狀圖（ interval ）
| 列表 | 設定值 |
| 欄位 | year\*population
|
| 類型 | 柱狀圖 |
| 顏色欄位 | year |
| 樣式 - 顏色 | \#ffffff |
| 樣式 - 寬度 | 2 |
- #### 圖示 Legend
| 列表 | 設定值 |
| 啟用 | 開啟 |
| 欄位 | year |
| 位置 | 右 |
| 排版 | 垂直 |
| 水平偏移量 | -160 |
| 垂直偏移量 | -160 |
- #### 極坐標 Coord
# 南丁格爾玫瑰圓環圖
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/vjCzmHa4z9BydwAQ-%E5%8D%97%E4%B8%81%E6%A0%BC%E7%88%BE%E7%8E%AB%E7%91%B0%E5%9C%93%E7%92%B0%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
year: '2001',
population: 41.8
}, {
year: '2002',
population: 38
}, {
year: '2003',
population: 33.7
}, {
year: '2004',
population: 30.7
}, {
year: '2005',
population: 25.8
}, {
year: '2006',
population: 31.7
}, {
year: '2007',
population: 33
}, {
year: '2008',
population: 46
}, {
year: '2009',
population: 38.3
}, {
year: '2010',
population: 28
}, {
year: '2011',
population: 42.5
}, {
year: '2012',
population: 30.3
}]
```
- #### 內距
```
0
```
- #### 軸座標 Axis
##### population（ Y軸 ）
##### year（ X軸 ）
- #### 圖 Geom
##### 柱狀圖（ interval ）
| 列表 | 設定值 |
| 欄位 | year\*population
|
| 類型 | 柱狀圖 |
| 顏色欄位 | year |
| 樣式 - 顏色 | \#ffffff |
| 樣式 - 寬度 | 2 |
- #### 圖示 Legend
| 列表 | 設定值 |
| 啟用 | 開啟 |
| 欄位 | year |
| 位置 | 右 |
| 排版 | 垂直 |
| 水平偏移量 | -160 |
| 垂直偏移量 | -160 |
- #### 極坐標 Coord
# 點圖
Scatter Chart，也叫 X-Y 圖，它將所有的數據以點的形式展現在笛卡爾坐標系上，以顯示變量之間的相互影響程度，點的位置由變量的數值決定。
# 基礎散點圖
通過觀察散點圖上數據點的分佈情況，我們可以推斷出變量間的相關性。如果變量之間不存在相互關係，那麼在散點圖上就會表現為隨機分佈的離散的點，如果存在某種相關性，那麼大部分的數據點就會相對密集並以某種趨勢呈現。數據的相關關係主要分為：正相關（兩個變量值同時增長）、負相關（一個變量值增加另一個變量值下降）、不相關、線性相關、指數相關等，表現在散點圖上的大致分佈如下圖所示。那些離點集群較遠的點我們稱為離群點或者異常點。
### 預覽圖
---
#### [](https://book.gosu.bar/uploads/images/gallery/2019-12/zZvNMsGjmY5IfvhX-%E6%95%A3%E9%BB%9E%E5%9C%96.png)
### 設定值
---
- #### 資料源 - [AntV](https://g2.antv.vision/zh/examples/point/scatter)
```
https://g2.antv.vision/zh/examples/data/scatter.json
（ 資料來源：AntV ）
格式：
[
{gender: "female",height: 161.2,weight: 51.6,},
{gender: "female",height: 167.5,weight: 59,},
......
]
```
- #### 內距
```
40, 40, 60, 60
```
- #### 圖 Geom
##### 點圖（point）
| 列表 | 設定值 |
| 欄位 | height\*weight |
| 類型 | 點圖 |
| 形狀 | circle |
# 多色散點圖
### 預覽圖
---
#### [](https://book.gosu.bar/uploads/images/gallery/2019-12/9DBly2xi4KSosMXR-%E5%A4%9A%E8%89%B2%E6%95%A3%E9%BB%9E%E5%9C%96.png)
### 設定值
---
- #### 資料源 - [AntV](https://g2.antv.vision/zh/examples/point/scatter)
```
https://g2.antv.vision/zh/examples/data/scatter.json
（ 資料來源：AntV ）
格式：
[
{gender: "female",height: 161.2,weight: 51.6,},
{gender: "female",height: 167.5,weight: 59,},
......
]
```
- #### 內距
```
40, 40, 60, 60
```
- #### 圖 Geom
##### 點圖（point）
| 列表 | 設定值 |
| 欄位 | height\*weight |
| 類型 | 點圖 |
| 顏色欄位 | gender |
| 形狀參數 | circle |
| 大小參數 | 4 |
# 多形多色散點圖
### 預覽圖
---
#### [](https://book.gosu.bar/uploads/images/gallery/2019-12/GpX94sqLDSRTRbeB-%E5%A4%9A%E5%BD%A2%E5%A4%9A%E8%89%B2%E6%95%A3%E9%BB%9E%E5%9C%96.PNG)
### 設定值
---
- #### 資料源 - [AntV](https://g2.antv.vision/zh/examples/point/scatter)
```
https://g2.antv.vision/zh/examples/data/scatter.json
（ 資料來源：AntV ）
格式：
[
{gender: "female",height: 161.2,weight: 51.6,},
{gender: "female",height: 167.5,weight: 59,},
......
]
```
- #### 內距
```
40, 40, 60, 60
```
- #### 圖 Geom
##### 點圖（point）
| 列表 | 設定值 |
| 欄位 | height\*weight |
| 類型 | 點圖 |
| 顏色欄位 | gender |
| 形狀 | gender |
| 形狀參數 | circle,diamond |
| 大小參數 | 4 |
# 擾動點圖
圖片僅供參考，此點圖會浮動
### 預覽圖
---
#### [](https://book.gosu.bar/uploads/images/gallery/2019-12/bJSD39bNrWXH0VzB-%E6%93%BE%E5%8B%95%E9%BB%9E%E5%9C%96.png)
### 設定值
---
- #### 資料源 - [AntV](https://g2.antv.vision/zh/examples/point/scatter#jitter)
```
https://g2.antv.vision/zh/examples/data/dv-grades.json
（ 資料來源：AntV ）
格式：
[
{Class: "Summer 2013",Grade: "C",Score: 72.5,},
{Class: "Summer 2013",Grade: "C",Score: 77.5,},
......
]
```
- #### 內距
```
40, 40, 60, 60
```
- #### 比例尺 Scale
##### Class（X軸）
| 列表 | 設定值 |
| 欄位 | Class |
| 類型 | cat |
| 刻度數量 | 5 |
| 優化數據範圍 | 開啟 |
- #### 軸座標 Axis
##### Score（ X軸 ）
##### Class（ Y軸 ）
| 列表 | 設定值 |
| 欄位 | Class |
| 啟用 | 開啟 |
| 刻度現 - 顏色 | \#A14242 |
| 次要刻度 - 數量 | 2 |
| 次要刻度 - 顏色 | \#A14242 |
- #### 圖 Geom
##### 點圖（point）
| 列表 | 設定值 |
| 欄位 | Class\*Score
|
| 類型 | 點圖 |
| 顏色欄位 | Grade |
| 形狀 | circle |
| 大小參數 | 4 |
| 調整欄位 | 擾動 | Jitter |
- #### 圖示 Legend
# 氣泡圖
圖片僅供參考，此點圖會浮動
### 預覽圖
---
#### [](https://book.gosu.bar/uploads/images/gallery/2019-12/gpgc3kbeGTaRRHRY-%E6%B0%A3%E6%B3%A1%E5%9C%96.png)
### 設定值
---
- #### 資料源 - [AntV](https://g2.antv.vision/zh/examples/point/scatter#bubble)
```
https://g2.antv.vision/zh/examples/data/bubble.json
（ 資料來源：AntV ）
格式：
[
{continent: "Americas",Country: "Argentina",LifeExpectancy: 75.32,GDP: 12779.37964,Population: 40301927,},
{continent: "Americas",Country: "Brazil",LifeExpectancy: 72.39,GDP: 9065.800825,Population: 190010647,},
......
]
```
- #### 內距
```
40, 40, 60, 60
```
- #### 比例尺 Scale
##### GDP（X軸）
| 列表 | 設定值 |
| 欄位 | GDP |
| 類型 | linear
|
| 優化數據範圍 | 開啟 |
| 最小值 | 0 |
| 格式化函數 | ```
function formatter(value) {
return (value / 1000).toFixed(0) + 'k';
}
```
|
- #### 圖 Geom
##### 點圖（point）
| 列表 | 設定值 |
| 欄位 | GDP\*LifeExpectancy
|
| 類型 | 點圖 |
| 顏色欄位 | continent |
| 形狀 | circle |
| 大小欄位 | Population
|
| 大小參數 | 4,65 |
| 調整欄位 | 擾動 | Jitter |
- #### 圖示 Legend
| 列表 | 設定值 |
| 啟用 | 開啟 |
| 欄位 | Population |
| 位置 | 下 |
| 排版 | 水平 |
| 水平偏移量 | 140
|
| 水平間距 | 80
|
# 面積圖
面積圖又叫區域圖。它是在折線圖的基礎之上形成的, 它將折線圖中折線與自變量坐標軸之間的區域使用顏色或者紋理填充，這樣一個填充區域我們叫做面積，顏色的填充可以更好的突出趨勢信息。
# 基礎面積圖
面積圖用於估計數量隨時間而變化的程度，也可用於引起人們對總值趨勢的注意。他們最常用於表現趨勢和關係，而不是傳達特定的值。
### 預覽圖
---
[](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 ）
##### 線圖（ Line ）
# 堆疊面積圖
和基本面積圖一樣，唯一的區別就是圖上每一個數據集的起點不同，起點是基於前一個數據集的，用於顯示每個數值所佔大小隨時間或類別變化的趨勢線，展示的是部分與整體的關係。
層疊面積圖上的最大的面積代表了所有的數據量的總和，是一個整體。各個疊起來的面積表示各個數據量的大小，這些堆疊起來的面積圖在表現大數據的總量分量的變化情況時格外有用，所以層疊面積圖不適用於表示帶有負值的數據集。非常適用於對比多變量隨時間變化的情況。
### 預覽圖
---
[](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 |
| 位置 | 下 |
| 排版 | 水平 |
# 區間面積圖
### 預覽圖
---
[](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軸 ）
- #### 圖 Geom
##### 區域圖（ area ）
| 列表 | 設定值 |
| 欄位 | time\*temperature |
| 類型 | 區域圖 |
##### 線圖（ Line ）
| 列表 | 設定值 |
| 欄位 | time\*constest
|
| 類型 | 線圖 |
| 大小 | 2 |
##### 點圖（ point ）
| 列表 | 設定值 |
| 欄位 | time\*constest |
| 類型 | 點圖 |
| 形狀 | circle |
| 樣式 - 顏色 | \#ffffff |
| 樣式 - 寬度 | 1 |
# 片段面積圖
### 預覽圖
---
[](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
|
| key | type |
| Value | value |
- #### 比例尺 Scale
##### year（ X軸 ）
| 列表 | 設定值 |
| 欄位 | year |
| 類型 | linear |
| 刻度間距 | 1 |
| 優化數據範圍 | 開啟 |
- #### 圖 Geom
##### 區域圖（ area ）
| 列表 | 設定值 |
| 欄位 | year\*value |
| 類型 | 區域圖 |
| 顏色欄位
| type |
| 形狀 | smooth |
##### 線圖（ Line ）
| 列表 | 設定值 |
| 欄位 | year\*value
|
| 類型 | 線圖 |
| 顏色欄位 | type |
| 形狀 | smooth |
| 大小 | 2 |
- #### 圖示 Legend
# 正負面積圖
### 預覽圖
---
[](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
|
| key | type |
| Value | value |
- #### 圖 Geom
##### 區域圖（ area ）
| 列表 | 設定值 |
| 欄位 | year\*value |
| 類型 | 區域圖 |
| 顏色欄位
| type |
##### 線圖（ Line ）
| 列表 | 設定值 |
| 欄位 | year\*value
|
| 類型 | 線圖 |
| 顏色欄位 | type |
| 大小 | 2 |
- #### 圖示 Legend
# 箱型圖
箱型圖，又稱盒須圖、盒式圖或箱線圖，是一種用作顯示一組數據分佈情況的統計圖。
# 基礎箱型圖
如果一個數據集中包含了一個分類變量和一個或者多個連續變量，那麼你可能會想知道連續變量會如何隨著分類變量水平的變化而變化，而箱形圖就可以提供這種方法，它只用了5個數字對分佈進行概括，即一組數據的最大值、最小值、中位數、下四分位數及上四分位數。對於數據集中的異常值，通常會以單獨的點的形式繪製。箱形圖可以水平或者垂直繪製。箱形圖多用於數值統計，雖然相比於直方圖和密度曲線較原始簡單，但是它不需要佔據過多的畫布空間，空間利用率高，非常適用於比較多組數據的分佈情況。
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/MzxqbdRc0HFReDPB-%E5%9F%BA%E7%A4%8E%E7%AE%B1%E5%9E%8B%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
x: 'Oceania',
low: 1,
q1: 9,
median: 16,
q3: 22,
high: 24
}, {
x: 'East Europe',
low: 1,
q1: 5,
median: 8,
q3: 12,
high: 16
}, {
x: 'Australia',
low: 1,
q1: 8,
median: 12,
q3: 19,
high: 26
}, {
x: 'South America',
low: 2,
q1: 8,
median: 12,
q3: 21,
high: 28
}, {
x: 'North Africa',
low: 1,
q1: 8,
median: 14,
q3: 18,
high: 24
}, {
x: 'North America',
low: 3,
q1: 10,
median: 17,
q3: 28,
high: 30
}, {
x: 'West Europe',
low: 1,
q1: 7,
median: 10,
q3: 17,
high: 22
}, {
x: 'West Africa',
low: 1,
q1: 6,
median: 8,
q3: 13,
high: 16
}]
```
- #### 內距
```
40,40,80,60
```
- #### 前置處理函數 Transform
##### 數據加工（ map ）
| 列表 | 設定值 |
| 類型
| 數據加工 |
| 加工函數 | ```
function callback(obj) {
obj.range = [obj.low, obj.q1, obj.median, obj.q3, obj.high];
return obj;}
```
|
- #### 圖 Geom
##### K線圖（ schema ）
| 列表 | 設定值 |
| 欄位 | x\*range |
| 類型 | K線圖
|
| 形狀 | box |
| 樣式 - 顏色 | \#545454
|
# 一維箱型圖
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/nDDKygDKZNRDrGxN-%E4%B8%80%E7%B6%AD%E7%AE%B1%E5%9E%8B%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
low: 1,
q1: 9,
median: 16,
q3: 22,
high: 24
}]
```
- #### 內距
```
40, 40, 60
```
- #### 前置處理函數 Transform
##### 數據加工（ map ）
| 列表 | 設定值 |
| 類型
| 數據加工 |
| 加工函數 | ```
function callback(obj) {
obj.range = [obj.low, obj.q1, obj.median, obj.q3, obj.high];
return obj;
}
```
|
- #### 圖 Geom
##### K線圖（ schema ）
| 列表 | 設定值 |
| 欄位 | range\*1 |
| 類型 | K線圖
|
| 形狀 | box |
| 樣式 - 顏色 | \#545454
|
# 環狀箱型圖
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/1dcgl5ozWxnNwFfJ-%E6%A5%B5%E5%BA%A7%E6%A8%99%E7%AE%B1%E5%9E%8B%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
x: 'Oceania',
low: 1,
q1: 9,
median: 16,
q3: 22,
high: 24
}, {
x: 'East Europe',
low: 1,
q1: 5,
median: 8,
q3: 12,
high: 16
}, {
x: 'Australia',
low: 1,
q1: 8,
median: 12,
q3: 19,
high: 26
}, {
x: 'South America',
low: 2,
q1: 8,
median: 12,
q3: 21,
high: 28
}, {
x: 'North Africa',
low: 1,
q1: 8,
median: 14,
q3: 18,
high: 24
}, {
x: 'North America',
low: 3,
q1: 10,
median: 17,
q3: 28,
high: 30
}, {
x: 'West Europe',
low: 1,
q1: 7,
median: 10,
q3: 17,
high: 22
}, {
x: 'West Africa',
low: 1,
q1: 6,
median: 8,
q3: 13,
high: 16
}]
```
- #### 內距
```
50, 50, 100
```
- #### 前置處理函數 Transform
##### 數據加工（map）
| 列表 | 設定值 |
| 類型 | 數據加工 |
| 加工函數 | ```
function callback(obj) {
obj.range = [obj.low, obj.q1, obj.median, obj.q3, obj.high];
return obj;}
```
|
- #### 比例尺 Scale
##### range（ Y軸 ）
| 列表 | 設定值 |
| 欄位 | range |
| 類型 | linear |
| 優化數據範圍 | 開啟 |
| 最大值 | 35 |
- #### 圖 Geom
##### K線圖（ schema ）
| 列表 | 設定值 |
| 欄位 | x\*range
|
| 類型 | K線圖 |
| 顏色欄位 | x
|
| 形狀 | box |
| 大小 | 60 |
- #### 圖示 Legend
| 列表 | 設定值 |
| 啟用 | 開啟 |
| 欄位 | x |
| 位置 | 下 |
| 排版 | 水平 |
| 自動換行 | 開啟 |
- #### 極坐標 Coord
# 基礎箱型圖 (有異常值)
### 預覽圖
---
#### [](https://book.gosu.bar/uploads/images/gallery/2019-12/5vUX2wwGLP03L555-%E7%95%B0%E5%B8%B8%E5%80%BC%E7%AE%B1%E5%9E%8B%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
x: '職業 A',
low: 20000,
q1: 26000,
median: 27000,
q3: 32000,
high: 38000,
outliers: [50000, 52000]
}, {
x: '職業 B',
low: 40000,
q1: 49000,
median: 62000,
q3: 73000,
high: 88000,
outliers: [32000, 29000, 106000]
}, {
x: '職業 C',
low: 52000,
q1: 59000,
median: 65000,
q3: 74000,
high: 83000,
outliers: [91000]
}, {
x: '職業 D',
low: 58000,
q1: 96000,
median: 130000,
q3: 170000,
high: 200000,
outliers: [42000, 210000, 215000]
}, {
x: '職業 E',
low: 24000,
q1: 28000,
median: 32000,
q3: 38000,
high: 42000,
outliers: [48000]
}, {
x: '職業 F',
low: 47000,
q1: 56000,
median: 69000,
q3: 85000,
high: 100000,
outliers: [110000, 115000, 32000]
}, {
x: '職業 G',
low: 64000,
q1: 74000,
median: 83000,
q3: 93000,
high: 100000,
outliers: [110000]
}, {
x: '職業 H',
low: 67000,
q1: 72000,
median: 84000,
q3: 95000,
high: 110000,
outliers: [57000, 54000]
}]
```
- #### 內距
```
40, 40, 60, 60
```
- #### 前置處理函數 Transform
##### 數據加工（ map ）
| 列表 | 設定值 |
| 類型 | 數據加工 |
| 加工函數 | ```
function callback(obj) {
obj.range = [obj.low, obj.q1, obj.median, obj.q3, obj.high];
return obj;}
```
|
- #### 比例尺 Scale
##### range（ Y軸 ）
| 列表 | 設定值 |
| 欄位 | range |
| 類型 | linear |
| 優化數據範圍 | 開啟 |
| 最小值 | 0 |
| 最大值 | 250000 |
##### outliers（ Y軸 ）
| 列表 | 設定值 |
| 欄位 | outliers |
| 類型 | linear |
| 優化數據範圍 | 開啟 |
| 最小值 | 0 |
| 最大值 | 250000 |
- #### 軸座標 Axis
##### outliers（ Y軸 ）
- #### 圖 Geom
##### K線圖（ schema ）
| 列表 | 設定值 |
| 欄位 | x\*range
|
| 類型 | K線圖 |
| 形狀 | box |
##### 點圖（ point ）
| 列表 | 設定值 |
| 欄位 | x\*outliers |
| 類型 | 點圖 |
| 形狀 | circle |
| 大小 | 3 |
# 蠟燭圖
燭形圖，原名 K 線圖，蠟燭圖，又稱陰陽圖、棒線、紅黑線或蠟燭線，常用於展示股票交易數據。
# 股票圖
燭形圖主要用於金融領域裡展示股票，期貨等交易數據，按照時間維度分為日 K 線、週 K 線、月 K 線。展示的數據需要滿足 K 線構成的四要素：即開盤價、收盤價、最高價、最低價。
### 預覽圖
---
#### [](https://book.gosu.bar/uploads/images/gallery/2019-12/gttV2l3FKAtS3kwK-%E7%AF%84%E4%BE%8B%E8%82%A1%E7%A5%A8%E5%9C%96.png)
### 設定值
---
- #### 資料源 - [AntV](https://g2.antv.vision/zh/examples/candlestick/demo)
```
https://g2.antv.vision/zh/examples/data/candle-sticks.json
（ 資料來源：AntV ）
格式:
[{
time: "2015-11-19",
start: 8.18,
max: 8.33,
min: 7.98,
end: 8.32,
volumn: 1810,
money: 14723.56,
},{
time: "2015-11-18",
start: 8.37,
max: 8.6,
min: 8.03,
end: 8.09,
volumn: 2790.37,
money: 23309.19,
},
......
]
```
- #### 內距
```
40,30,80,40
```
- #### 前置處理函數 Transform
##### 數據加工（ map ）
| 列表 | 設定值 |
| 加工函數 | ```
function callback(obj) {
obj.trend = obj.start <= obj.end ? 'up' : 'down';
obj.range = [obj.start, obj.end, obj.max, obj.min];
return obj;}
```
|
- #### 比例尺 Scale
##### time（X軸）
| 列表 | 設定值 |
| 欄位 | time |
| 類型 | timeCat |
| 刻度數量 | 10 |
| 優化數據範圍 | 開啟 |
| 時間格式 | MM-DD |
##### volumn（ Y軸 ）
| 列表 | 設定值 |
| 欄位 | volumn |
| 類型 | linear |
| 優化數據範圍 | 開啟 |
| 最小值 | 0 |
| 最大值 | 30000 |
##### range（ Y軸 ）
| 列表 | 設定值 |
| 欄位 | range |
| 類型 | linear |
| 刻度間距 | 2 |
| 優化數據範圍 | 開啟 |
| 最小值 | 0 |
| 最大值 | 18 |
- #### 軸座標 Axis
##### time（ X軸 ）
##### volumn（ Y軸 ）
- #### 圖 Geom
##### K線圖（ schema ）
| 列表 | 設定值 |
| 欄位 | time\*range
|
| 類型 | K線圖 |
| 顏色欄位 | trend |
| 顏色 | ```
function(val) {
return (val == 'up')? '#f04864':'#2fc25b';
}
```
|
| 形狀 | candle |
##### 柱狀圖（ interval ）
| 列表 | 設定值 |
| 欄位 | time\*volumn |
| 類型 | 柱狀圖 |
| 顏色欄位 | trend |
| 顏色 | ```
function(val) {
return (val == 'up')? '#f04864':'#2fc25b';
}
```
|
- #### 圖示 Legend
| 列表 | 設定值 |
| 啟用 | 開啟 |
| 欄位 | range |
| 位置 | 下 |
| 排版 | 水平 |
| 水平偏移量 | 15 |
# 股票範圍面積圖
### 預覽圖
---
#### [](https://book.gosu.bar/uploads/images/gallery/2019-12/70pXwTMz1M8TE1Zd-%E8%82%A1%E7%A5%A8%E7%AF%84%E5%9C%8D%E9%9D%A2%E7%A9%8D%E5%9C%96.png)
### 設定值
---
- #### 資料源 - [AntV](https://g2.antv.vision/zh/examples/candlestick/demo)
```
https://g2.antv.vision/zh/examples/data/stock-03.json
（ 資料來源：AntV ）
格式：
[{
date: 1186444800000,
range: [22.258032033902,25.4889359321959,],
start: 22.75,
end: 23.44,
lowest: 22.69,
highest: 23.7,
mean: 23.335,
trend: "up",
},{
date: 1186358400000,
range: [22.2381666799343,25.3786666401314,],
start: 23.03,
end: 22.97,
lowest: 22.44,
highest: 23.15,
mean: 23.285,
trend: "down",
},
......
]
```
- #### 內距
```
40, 40, 80, 60
```
- #### 前置處理函數 Transform
##### 數據加工（ map ）
| 列表 | 設定值 |
| 類型 | 數據加工 |
| 加工函數 | ```
function callback(obj) {
obj.stockRange = [obj.start, obj.end, obj.highest, obj.lowest];
return obj;
}
```
|
- #### 比例尺 Scale
##### date（X軸）
| 列表 | 設定值 |
| 欄位 | date |
| 類型 | time |
| 刻度數量 | 10 |
| 優化數據範圍 | 開啟 |
| 時間格式 | MM-DD |
##### range（ Y軸 ）
| 列表 | 設定值 |
| 欄位 | range |
| 類型 | linear |
| 刻度間距 | 2 |
| 優化數據範圍 | 開啟 |
| 最小值 | 20 |
| 最大值 | 35 |
##### mean（ Y軸 ）
| 列表 | 設定值 |
| 欄位 | mean |
| 類型 | linear |
| 優化數據範圍 | 開啟 |
| 最小值 | 20 |
| 最大值 | 35 |
##### stockRange（ Y軸 ）
| 列表 | 設定值 |
| 欄位 | stockRange |
| 類型 | linear |
| 優化數據範圍 | 開啟 |
| 最小值 | 20 |
| 最大值 | 35 |
- #### 軸座標 Axis
##### mean（ Y軸 ）
##### stockRange（ Y軸 ）
- #### 圖 Geom
##### K線圖（ schema ）
| 列表 | 設定值 |
| 欄位 | date\*stockRange
|
| 類型 | K線圖 |
| 顏色 | ```
function(obj){
return (obj == 'up')? '#f04864' : '#2fc25b';
}
```
|
| 形狀 | candle |
##### 區域圖（ area ）
| 列表 | 設定值 |
| 欄位 | date\*range |
| 類型 | 區域圖 |
| 顏色 | \#64b5f6 |
##### 線圖（ line ）
| 列表 | 設定值 |
| 欄位 | date\*mean |
| 類型 | 線圖 |
| 顏色 | \#FACC14 |
- #### 圖示 Legend
# 雷達圖
雷達圖是以相同點開始的軸上表示的三個或更多個定量變量的二維圖形的形式顯示多變量數據的圖形方法。軸的相對位置和角度通常是不知情的。
# 基礎雷達圖
### 預覽圖
---
#### [](https://book.gosu.bar/uploads/images/gallery/2019-12/KLeuf3qnbe74oplX-%E5%9F%BA%E7%A4%8E%E9%9B%B7%E9%81%94%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
item: 'Design',
a: 70,
b: 30
}, {
item: 'Development',
a: 60,
b: 70
}, {
item: 'Marketing',
a: 50,
b: 60
}, {
item: 'Users',
a: 40,
b: 50
}, {
item: 'Test',
a: 60,
b: 70
}, {
item: 'Language',
a: 70,
b: 50
}, {
item: 'Technology',
a: 50,
b: 40
}, {
item: 'Support',
a: 30,
b: 40
}, {
item: 'Sales',
a: 60,
b: 40
}, {
item: 'UX',
a: 50,
b: 60
}]
```
- #### 內距
```
50, 50, 80
```
- #### 前置處理函數 Transform
##### 字串展開（ fold ）
| 列表 | 設定值 |
| 類型 | 字串展開 |
| 要展開的欄位 | a,b |
| 保留欄位 | item |
| Key | user |
| Value | score |
- #### 比例尺 Scale
##### score（ Y軸 ）
| 列表 | 設定值 |
| 欄位 | score |
| 類型 | linear |
| 最小值 | 0 |
| 最大值 | 80 |
- #### 軸座標 Axis
##### item（ X軸 ）
| 列表 | 設定值 |
| 欄位 | item |
| 啟用 | 開啟 |
| 軸線 - 顏色 | transparent |
- #### 圖 Geom
##### 線圖（line）
| 列表 | 設定值 |
| 欄位 | item\*score
|
| 類型 | 線圖 |
| 顏色欄位 | user |
| 大小 | 2 |
##### 點圖（point）
| 列表 | 設定值 |
| 欄位 | item\*score |
| 類型 | 點圖 |
| 顏色欄位 | user |
| 形狀 | circle |
| 大小 | 4 |
| 樣式 - 顏色 | \#ffffff |
| 樣式 - 寬度 | 1 |
##### 區域圖（ area ）
| 列表 | 設定值 |
| 欄位 | item\*score |
| 類型 | 區域圖 |
| 顏色欄位 | user |
- #### 圖示 Legend
- #### 極坐標 Coord
# 曲線雷達圖
### 預覽圖
---
#### [](https://book.gosu.bar/uploads/images/gallery/2019-12/JqWZlV7yHAwV9mmT-%E6%9B%B2%E7%B7%9A%E9%9B%B7%E9%81%94%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{"x": 0,"y": 0},{"x": 1,"y": 0.0785},{"x": 2,"y": 0.1568},{"x": 3,"y": 0.2347},{"x": 4,"y": 0.3119},{"x": 5,"y": 0.3882},{"x": 6,"y": 0.4635},{"x": 7,"y": 0.5376},{"x": 8,"y": 0.6101},{"x": 9,"y": 0.681},{"x": 10,"y": 0.75},{"x": 11,"y": 0.817},{"x": 12,"y": 0.8817},{"x": 13,"y": 0.944},{"x": 14,"y": 1.0037},{"x": 15,"y": 1.0607},{"x": 16,"y": 1.1147},{"x": 17,"y": 1.1657},{"x": 18,"y": 1.2135},{"x": 19,"y": 1.258},{"x": 20,"y": 1.299},{"x": 21,"y": 1.3365},{"x": 22,"y": 1.3703},{"x": 23,"y": 1.4004},{"x": 24,"y": 1.4266},{"x": 25,"y": 1.4489},{"x": 26,"y": 1.4672},{"x": 27,"y": 1.4815},{"x": 28,"y": 1.4918},{"x": 29,"y": 1.4979},{"x": 30,"y": 1.5},{"x": 31,"y": 1.4979},{"x": 32,"y": 1.4918},{"x": 33,"y": 1.4815},{"x": 34,"y": 1.4672},{"x": 35,"y": 1.4489},{"x": 36,"y": 1.4266},{"x": 37,"y": 1.4004},{"x": 38,"y": 1.3703},{"x": 39,"y": 1.3365},{"x": 40,"y": 1.299},{"x": 41,"y": 1.258},{"x": 42,"y": 1.2135},{"x": 43,"y": 1.1657},{"x": 44,"y": 1.1147},{"x": 45,"y": 1.0607},{"x": 46,"y": 1.0037},{"x": 47,"y": 0.944},{"x": 48,"y": 0.8817},{"x": 49,"y": 0.817},{"x": 50,"y": 0.75},{"x": 51,"y": 0.681},{"x": 52,"y": 0.6101},{"x": 53,"y": 0.5376},{"x": 54,"y": 0.4635},{"x": 55,"y": 0.3882},{"x": 56,"y": 0.3119},{"x": 57,"y": 0.2347},{"x": 58,"y": 0.1568},{"x": 59,"y": 0.0785},{"x": 60,"y": 0},{"x": 61,"y": 0.0785},{"x": 62,"y": 0.1568},{"x": 63,"y": 0.2347},{"x": 64,"y": 0.3119},{"x": 65,"y": 0.3882},{"x": 66,"y": 0.4635},{"x": 67,"y": 0.5376},{"x": 68,"y": 0.6101},{"x": 69,"y": 0.681},{"x": 70,"y": 0.75},{"x": 71,"y": 0.817},{"x": 72,"y": 0.8817},{"x": 73,"y": 0.944},{"x": 74,"y": 1.0037},{"x": 75,"y": 1.0607},{"x": 76,"y": 1.1147},{"x": 77,"y": 1.1657},{"x": 78,"y": 1.2135},{"x": 79,"y": 1.258},{"x": 80,"y": 1.299},{"x": 81,"y": 1.3365},{"x": 82,"y": 1.3703},{"x": 83,"y": 1.4004},{"x": 84,"y": 1.4266},{"x": 85,"y": 1.4489},{"x": 86,"y": 1.4672},{"x": 87,"y": 1.4815},{"x": 88,"y": 1.4918},{"x": 89,"y": 1.4979},{"x": 90,"y": 1.5},{"x": 91,"y": 1.4979},{"x": 92,"y": 1.4918},{"x": 93,"y": 1.4815},{"x": 94,"y": 1.4672},{"x": 95,"y": 1.4489},{"x": 96,"y": 1.4266},{"x": 97,"y": 1.4004},{"x": 98,"y": 1.3703},{"x": 99,"y": 1.3365},{"x": 100,"y": 1.299},{"x": 101,"y": 1.258},{"x": 102,"y": 1.2135},{"x": 103,"y": 1.1657},{"x": 104,"y": 1.1147},{"x": 105,"y": 1.0607},{"x": 106,"y": 1.0037},{"x": 107,"y": 0.944},{"x": 108,"y": 0.8817},{"x": 109,"y": 0.817},{"x": 110,"y": 0.75},{"x": 111,"y": 0.681},{"x": 112,"y": 0.6101},{"x": 113,"y": 0.5376},{"x": 114,"y": 0.4635},{"x": 115,"y": 0.3882},{"x": 116,"y": 0.3119},{"x": 117,"y": 0.2347},{"x": 118,"y": 0.1568},{"x": 119,"y": 0.0785},{"x": 120,"y": 0},{"x": 121,"y": 0.0785},{"x": 122,"y": 0.1568},{"x": 123,"y": 0.2347},{"x": 124,"y": 0.3119},{"x": 125,"y": 0.3882},{"x": 126,"y": 0.4635},{"x": 127,"y": 0.5376},{"x": 128,"y": 0.6101},{"x": 129,"y": 0.681},{"x": 130,"y": 0.75},{"x": 131,"y": 0.817},{"x": 132,"y": 0.8817},{"x": 133,"y": 0.944},{"x": 134,"y": 1.0037},{"x": 135,"y": 1.0607},{"x": 136,"y": 1.1147},{"x": 137,"y": 1.1657},{"x": 138,"y": 1.2135},{"x": 139,"y": 1.258},{"x": 140,"y": 1.299},{"x": 141,"y": 1.3365},{"x": 142,"y": 1.3703},{"x": 143,"y": 1.4004},{"x": 144,"y": 1.4266},{"x": 145,"y": 1.4489},{"x": 146,"y": 1.4672},{"x": 147,"y": 1.4815},{"x": 148,"y": 1.4918},{"x": 149,"y": 1.4979},{"x": 150,"y": 1.5},{"x": 151,"y": 1.4979},{"x": 152,"y": 1.4918},{"x": 153,"y": 1.4815},{"x": 154,"y": 1.4672},{"x": 155,"y": 1.4489},{"x": 156,"y": 1.4266},{"x": 157,"y": 1.4004},{"x": 158,"y": 1.3703},{"x": 159,"y": 1.3365},{"x": 160,"y": 1.299},{"x": 161,"y": 1.258},{"x": 162,"y": 1.2135},{"x": 163,"y": 1.1657},{"x": 164,"y": 1.1147},{"x": 165,"y": 1.0607},{"x": 166,"y": 1.0037},{"x": 167,"y": 0.944},{"x": 168,"y": 0.8817},{"x": 169,"y": 0.817},{"x": 170,"y": 0.75},{"x": 171,"y": 0.681},{"x": 172,"y": 0.6101},{"x": 173,"y": 0.5376},{"x": 174,"y": 0.4635},{"x": 175,"y": 0.3882},{"x": 176,"y": 0.3119},{"x": 177,"y": 0.2347},{"x": 178,"y": 0.1568},{"x": 179,"y": 0.0785},{"x": 180,"y": 0},{"x": 181,"y": 0.0785},{"x": 182,"y": 0.1568},{"x": 183,"y": 0.2347},{"x": 184,"y": 0.3119},{"x": 185,"y": 0.3882},{"x": 186,"y": 0.4635},{"x": 187,"y": 0.5376},{"x": 188,"y": 0.6101},{"x": 189,"y": 0.681},{"x": 190,"y": 0.75},{"x": 191,"y": 0.817},{"x": 192,"y": 0.8817},{"x": 193,"y": 0.944},{"x": 194,"y": 1.0037},{"x": 195,"y": 1.0607},{"x": 196,"y": 1.1147},{"x": 197,"y": 1.1657},{"x": 198,"y": 1.2135},{"x": 199,"y": 1.258},{"x": 200,"y": 1.299},{"x": 201,"y": 1.3365},{"x": 202,"y": 1.3703},{"x": 203,"y": 1.4004},{"x": 204,"y": 1.4266},{"x": 205,"y": 1.4489},{"x": 206,"y": 1.4672},{"x": 207,"y": 1.4815},{"x": 208,"y": 1.4918},{"x": 209,"y": 1.4979},{"x": 210,"y": 1.5},{"x": 211,"y": 1.4979},{"x": 212,"y": 1.4918},{"x": 213,"y": 1.4815},{"x": 214,"y": 1.4672},{"x": 215,"y": 1.4489},{"x": 216,"y": 1.4266},{"x": 217,"y": 1.4004},{"x": 218,"y": 1.3703},{"x": 219,"y": 1.3365},{"x": 220,"y": 1.299},{"x": 221,"y": 1.258},{"x": 222,"y": 1.2135},{"x": 223,"y": 1.1657},{"x": 224,"y": 1.1147},{"x": 225,"y": 1.0607},{"x": 226,"y": 1.0037},{"x": 227,"y": 0.944},{"x": 228,"y": 0.8817},{"x": 229,"y": 0.817},{"x": 230,"y": 0.75},{"x": 231,"y": 0.681},{"x": 232,"y": 0.6101},{"x": 233,"y": 0.5376},{"x": 234,"y": 0.4635},{"x": 235,"y": 0.3882},{"x": 236,"y": 0.3119},{"x": 237,"y": 0.2347},{"x": 238,"y": 0.1568},{"x": 239,"y": 0.0785},{"x": 240,"y": 0},{"x": 241,"y": 0.0785},{"x": 242,"y": 0.1568},{"x": 243,"y": 0.2347},{"x": 244,"y": 0.3119},{"x": 245,"y": 0.3882},{"x": 246,"y": 0.4635},{"x": 247,"y": 0.5376},{"x": 248,"y": 0.6101},{"x": 249,"y": 0.681},{"x": 250,"y": 0.75},{"x": 251,"y": 0.817},{"x": 252,"y": 0.8817},{"x": 253,"y": 0.944},{"x": 254,"y": 1.0037},{"x": 255,"y": 1.0607},{"x": 256,"y": 1.1147},{"x": 257,"y": 1.1657},{"x": 258,"y": 1.2135},{"x": 259,"y": 1.258},{"x": 260,"y": 1.299},{"x": 261,"y": 1.3365},{"x": 262,"y": 1.3703},{"x": 263,"y": 1.4004},{"x": 264,"y": 1.4266},{"x": 265,"y": 1.4489},{"x": 266,"y": 1.4672},{"x": 267,"y": 1.4815},{"x": 268,"y": 1.4918},{"x": 269,"y": 1.4979},{"x": 270,"y": 1.5},{"x": 271,"y": 1.4979},{"x": 272,"y": 1.4918},{"x": 273,"y": 1.4815},{"x": 274,"y": 1.4672},{"x": 275,"y": 1.4489},{"x": 276,"y": 1.4266},{"x": 277,"y": 1.4004},{"x": 278,"y": 1.3703},{"x": 279,"y": 1.3365},{"x": 280,"y": 1.299},{"x": 281,"y": 1.258},{"x": 282,"y": 1.2135},{"x": 283,"y": 1.1657},{"x": 284,"y": 1.1147},{"x": 285,"y": 1.0607},{"x": 286,"y": 1.0037},{"x": 287,"y": 0.944},{"x": 288,"y": 0.8817},{"x": 289,"y": 0.817},{"x": 290,"y": 0.75},{"x": 291,"y": 0.681},{"x": 292,"y": 0.6101},{"x": 293,"y": 0.5376},{"x": 294,"y": 0.4635},{"x": 295,"y": 0.3882},{"x": 296,"y": 0.3119},{"x": 297,"y": 0.2347},{"x": 298,"y": 0.1568},{"x": 299,"y": 0.0785},{"x": 300,"y": 0},{"x": 301,"y": 0.0785},{"x": 302,"y": 0.1568},{"x": 303,"y": 0.2347},{"x": 304,"y": 0.3119},{"x": 305,"y": 0.3882},{"x": 306,"y": 0.4635},{"x": 307,"y": 0.5376},{"x": 308,"y": 0.6101},{"x": 309,"y": 0.681},{"x": 310,"y": 0.75},{"x": 311,"y": 0.817},{"x": 312,"y": 0.8817},{"x": 313,"y": 0.944},{"x": 314,"y": 1.0037},{"x": 315,"y": 1.0607},{"x": 316,"y": 1.1147},{"x": 317,"y": 1.1657},{"x": 318,"y": 1.2135},{"x": 319,"y": 1.258},{"x": 320,"y": 1.299},{"x": 321,"y": 1.3365},{"x": 322,"y": 1.3703},{"x": 323,"y": 1.4004},{"x": 324,"y": 1.4266},{"x": 325,"y": 1.4489},{"x": 326,"y": 1.4672},{"x": 327,"y": 1.4815},{"x": 328,"y": 1.4918},{"x": 329,"y": 1.4979},{"x": 330,"y": 1.5},{"x": 331,"y": 1.4979},{"x": 332,"y": 1.4918},{"x": 333,"y": 1.4815},{"x": 334,"y": 1.4672},{"x": 335,"y": 1.4489},{"x": 336,"y": 1.4266},{"x": 337,"y": 1.4004},{"x": 338,"y": 1.3703},{"x": 339,"y": 1.3365},{"x": 340,"y": 1.299},{"x": 341,"y": 1.258},{"x": 342,"y": 1.2135},{"x": 343,"y": 1.1657},{"x": 344,"y": 1.1147},{"x": 345,"y": 1.0607},{"x": 346,"y": 1.0037},{"x": 347,"y": 0.944},{"x": 348,"y": 0.8817},{"x": 349,"y": 0.817},{"x": 350,"y": 0.75},{"x": 351,"y": 0.681},{"x": 352,"y": 0.6101},{"x": 353,"y": 0.5376},{"x": 354,"y": 0.4635},{"x": 355,"y": 0.3882},{"x": 356,"y": 0.3119},{"x": 357,"y": 0.2347},{"x": 358,"y": 0.1568},{"x": 359,"y": 0.0785},{"x": 360,"y": 0}]
```
- #### 內距
```
40, 40, 60, 60
```
- #### 比例尺 Scale
##### x（ X軸 ）
- #### 軸座標 Axis
##### y（ y軸 ）
- #### 圖 Geom
##### 線圖（line）
| 列表 | 設定值 |
| 欄位 | x\*y
|
| 類型 | 線圖 |
| 顏色 | \#ff8800 |
| 大小 | 2 |
- #### 極坐標 Coord
# 其它
# 路徑圖
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/k4uZPPoo0q5svmKT-%E8%B7%AF%E5%BE%91%E5%9C%96.png)
### 設定值
---
- #### 資料源
```
[{
consumption: 0.65,
price: 1,
year: 1965
}, {
consumption: 0.66,
price: 1.05,
year: 1966
}, {
consumption: 0.64,
price: 1.1,
year: 1967
}, {
consumption: 0.63,
price: 1.12,
year: 1968
}, {
consumption: 0.55,
price: 1.15,
year: 1969
}, {
consumption: 0.57,
price: 1.19,
year: 1970
}, {
consumption: 0.58,
price: 1.14,
year: 1971
}, {
consumption: 0.59,
price: 1,
year: 1972
}, {
consumption: 0.57,
price: 0.96,
year: 1973
}, {
consumption: 0.55,
price: 0.92,
year: 1974
}, {
consumption: 0.54,
price: 0.88,
year: 1975
}, {
consumption: 0.55,
price: 0.87,
year: 1976
}, {
consumption: 0.42,
price: 0.89,
year: 1977
}, {
consumption: 0.28,
price: 1,
year: 1978
}, {
consumption: 0.15,
price: 1.1,
year: 1979
}]
```
- #### 內距
```
40, 40, 60, 60
```
- #### 圖 Geom
##### 路徑圖（ path）
| 列表 | 設定值 |
| 欄位
| price\*consumption |
| 類型 | 路徑圖 |
| 顏色 | \#1890ff |
##### 點圖（ point ）
| 列表 | 設定值 |
| 欄位 | price\*consumption |
| 類型 | 點圖 |
| 形狀 | circle |
| 大小 | 4 |
# 更多應用範例
# 染色區域折線圖
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/p9uJFBxjv4m3FUgc-%E6%9F%93%E8%89%B2%E8%B5%B0%E5%8B%A2%E5%9C%96.PNG)
### 設定值
---
- #### 資料源
```
[
{year: 1884,change: -0.28,},
{year: 1885,change: -0.32,},
{year: 1886,change: -0.31,},
{year: 1887,change: -0.33,},
{year: 1888,change: -0.2,},
{year: 1889,change: -0.12,},
{year: 1890,change: -0.37,},
{year: 1891,change: -0.24,},
{year: 1892,change: -0.27,},
{year: 1893,change: -0.3,},
{year: 1894,change: -0.31,},
{year: 1895,change: -0.21,},
{year: 1896,change: -0.15,},
{year: 1897,change: -0.11,},
{year: 1898,change: -0.28,},
{year: 1899,change: -0.16,},
{year: 1900,change: -0.09,},
{year: 1901,change: -0.15,},
{year: 1902,change: -0.27,},
{year: 1903,change: -0.35,},
{year: 1904,change: -0.44,},
{year: 1905,change: -0.28,},
{year: 1906,change: -0.23,},
{year: 1907,change: -0.4,},
{year: 1908,change: -0.43,},
{year: 1909,change: -0.47,},
{year: 1910,change: -0.42,},
{year: 1911,change: -0.44,},
{year: 1912,change: -0.35,},
{year: 1913,change: -0.34,},
{year: 1914,change: -0.16,},
{year: 1915,change: -0.11,},
{year: 1916,change: -0.34,},
{year: 1917,change: -0.4,},
{year: 1918,change: -0.26,},
{year: 1919,change: -0.22,},
{year: 1920,change: -0.27,},
{year: 1921,change: -0.21,},
{year: 1922,change: -0.28,},
{year: 1923,change: -0.24,},
{year: 1924,change: -0.28,},
{year: 1925,change: -0.21,},
{year: 1926,change: -0.1,},
{year: 1927,change: -0.21,},
{year: 1928,change: -0.21,},
{year: 1929,change: -0.36,},
{year: 1930,change: -0.15,},
{year: 1931,change: -0.09,},
{year: 1932,change: -0.17,},
{year: 1933,change: -0.28,},
{year: 1934,change: -0.14,},
{year: 1935,change: -0.2,},
{year: 1936,change: -0.15,},
{year: 1937,change: -0.03,},
{year: 1938,change: -0.03,},
{year: 1939,change: -0.03,},
{year: 1940,change: 0.08,},
{year: 1941,change: 0.12,},
{year: 1942,change: 0.09,},
{year: 1943,change: 0.13,},
{year: 1944,change: 0.25,},
{year: 1945,change: 0.12,},
{year: 1946,change: -0.04,},
{year: 1947,change: -0.05,},
{year: 1948,change: -0.09,},
{year: 1949,change: -0.09,},
{year: 1950,change: -0.18,},
{year: 1951,change: -0.07,},
{year: 1952,change: 0.01,},
{year: 1953,change: 0.08,},
{year: 1954,change: -0.13,},
{year: 1955,change: -0.15,},
{year: 1956,change: -0.2,},
{year: 1957,change: 0.04,},
{year: 1958,change: 0.07,},
{year: 1959,change: 0.03,},
{year: 1960,change: -0.02,},
{year: 1961,change: 0.05,},
{year: 1962,change: 0.03,},
{year: 1963,change: 0.06,},
{year: 1964,change: -0.2,},
{year: 1965,change: -0.1,},
{year: 1966,change: -0.05,},
{year: 1967,change: -0.02,},
{year: 1968,change: -0.07,},
{year: 1969,change: 0.07,},
{year: 1970,change: 0.02,},
{year: 1971,change: -0.09,},
{year: 1972,change: 0.01,},
{year: 1973,change: 0.15,},
{year: 1974,change: -0.07,},
{year: 1975,change: -0.02,},
{year: 1976,change: -0.11,},
{year: 1977,change: 0.18,},
{year: 1978,change: 0.07,},
{year: 1979,change: 0.17,},
{year: 1980,change: 0.27,},
{year: 1981,change: 0.33,},
{year: 1982,change: 0.13,},
{year: 1983,change: 0.3,},
{year: 1984,change: 0.15,},
{year: 1985,change: 0.12,},
{year: 1986,change: 0.19,},
{year: 1987,change: 0.33,},
{year: 1988,change: 0.41,},
{year: 1989,change: 0.28,},
{year: 1990,change: 0.44,},
{year: 1991,change: 0.43,},
{year: 1992,change: 0.23,},
{year: 1993,change: 0.24,},
{year: 1994,change: 0.32,},
{year: 1995,change: 0.46,},
{year: 1996,change: 0.35,},
{year: 1997,change: 0.48,},
{year: 1998,change: 0.64,},
{year: 1999,change: 0.42,},
{year: 2000,change: 0.42,},
{year: 2001,change: 0.55,},
{year: 2002,change: 0.63,},
{year: 2003,change: 0.62,},
{year: 2004,change: 0.55,},
{year: 2005,change: 0.69,},
{year: 2006,change: 0.63,},
{year: 2007,change: 0.66,},
{year: 2008,change: 0.54,},
{year: 2009,change: 0.64,},
{year: 2010,change: 0.71,},
{year: 2011,change: 0.6,},
{year: 2012,change: 0.63,},
{year: 2013,change: 0.65,},
{year: 2014,change: 0.74,},
{year: 2015,change: 0.87,},
{year: 2016,change: 0.99,},
]
```
- #### 內距
```
40, 40, 60, 60
```
- #### 圖 Geom
##### 線圖（line）
| 列表 | 設定值 |
| 欄位
| year\*change |
| 類型 | 線圖 |
| 形狀 | smooth |
##### 區域圖（area）
| 列表 | 設定值 |
| 欄位 | year\*change |
| 類型 | 區域圖 |
| 顏色 | \#ffffff |
- #### 分段著色 RegionFilter
##### 分段著色- 漲 ( #FF4D4F )
| 列表 | 設定值 |
| 繪製在最上層 | 開啟 |
| 起始位置 | min,max |
| 結束位置 | max,0 |
| 顏色 | |
##### 分段著色- 跌 (#18a1cd)
| 列表 | 設定值 |
| 繪製在最上層 | 開啟 |
| 起始位置 | min,0 |
| 結束位置 | max,min |
| 顏色 | |
# 折線柱狀圖
### 預覽圖
---
[](https://book.gosu.bar/uploads/images/gallery/2019-12/Kuewx4SdpCprhJJH-%E6%8A%98%E7%B7%9A%E6%9F%B1%E7%8B%80%E5%9C%96.PNG)
### 設定值
---
- #### 資料源
```
[
{ time: '10:10', call: 4, waiting: 2, people: 2 },
{ time: '10:15', call: 2, waiting: 6, people: 3 },
{ time: '10:20', call: 13, waiting: 2, people: 5 },
{ time: '10:25', call: 9, waiting: 9, people: 1 },
{ time: '10:30', call: 5, waiting: 2, people: 3 },
{ time: '10:35', call: 8, waiting: 2, people: 1 },
{ time: '10:40', call: 13, waiting: 1, people: 2 }
]
```
- #### 內距
```
40, 50, 50
```
- #### 比例尺 Scale
| 列表 | 設定值 |
| 欄位 | people |
| 類型 | linear |
| 最小值 | 0 |
| 最大值 | 5 |
- #### 軸座標 Axis
##### time（X軸）
| 列表 | 設定值 |
| 欄位 | time |
| 啟用 | 開啟 |
| 標籤 - 文字樣式 - 大小 | 18 |
| 刻度線 - 長度 | 5 |
| 網格 - 類型 | 線 |
| 網格 - 線條樣式 - 顏色 | |
| 網格 - 線條樣式 - 透明度 | 100 |
##### people（Y軸）
| 列表 | 設定值 |
| 欄位 | people |
| 啟用 | 開啟 |
| 標籤 - 文字樣式 - 顏色 | |
- #### 圖 Geom
##### 柱狀圖（ interval ）
| 列表 | 設定值 |
| 欄位 | time\*waiting
|
| 類型 | 柱狀圖 |
| 顏色
| \#3182bd
|
##### 線圖（line）
| 列表 | 設定值 |
| 欄位 | time\*people |
| 類型 | 線圖 |
| 顏色 | \#fdae6b |
| 形狀 | smooth |
| 大小 | 3 |
##### 點圖（point）
| 列表 | 設定值 |
| 欄位 | time\*people |
| 類型 | 點圖 |
| 顏色 | \#fdae6b |
| 形狀 | circle |
| 大小 | 4 |