# 蠟燭圖
燭形圖,原名 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