# 蠟燭圖 燭形圖,原名 K 線圖,蠟燭圖,又稱陰陽圖、棒線、紅黑線或蠟燭線,常用於展示股票交易數據。 # 股票圖 燭形圖主要用於金融領域裡展示股票,期貨等交易數據,按照時間維度分為日 K 線、週 K 線、月 K 線。展示的數據需要滿足 K 線構成的四要素:即開盤價、收盤價、最高價、最低價。 ### 預覽圖 --- #### [![範例股票圖.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/gttV2l3FKAtS3kwK-%E7%AF%84%E4%BE%8B%E8%82%A1%E7%A5%A8%E5%9C%96.png)](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軸 )
列表設定值
欄位time
啟用開啟
##### volumn( Y軸 )
列表設定值
欄位volumn
啟用關閉
- #### 圖 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
# 股票範圍面積圖 ### 預覽圖 --- #### [![股票範圍面積圖.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/70pXwTMz1M8TE1Zd-%E8%82%A1%E7%A5%A8%E7%AF%84%E5%9C%8D%E9%9D%A2%E7%A9%8D%E5%9C%96.png)](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軸 )
列表設定值
欄位mean
啟用關閉
##### stockRange( Y軸 )
列表設定值
欄位stockRange
啟用關閉
- #### 圖 Geom ##### K線圖( schema )
列表設定值
欄位date\*stockRange
類型K線圖
顏色``` function(obj){ return (obj == 'up')? '#f04864' : '#2fc25b'; }

```
形狀candle
##### 區域圖( area )
列表設定值
欄位date\*range
類型區域圖
顏色\#64b5f6
##### 線圖( line )
列表設定值
欄位date\*mean
類型線圖
顏色\#FACC14
- #### 圖示 Legend
列表設定值
啟用開啟
欄位trend
位置
排版水平