# 股票範圍面積圖 ### 預覽圖 --- #### [![股票範圍面積圖.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
位置
排版水平