Skip to main content

股票圖

燭形片僅供參考主要用於金融領域裡展示股票此點圖會浮動期貨等交易數據,按照時間維度分為日 K 線、週 K 線、月 K 線。展示的數據需要滿足 K 線構成的四要素:即開盤價、收盤價、最高價、最低價。

預覽圖


擾動點圖.png範例股票圖.png

設定值


https://g2.antv.vision/zh/examples/data/dv-grades.candle-sticks.json
( 資料來源:AntV )
格式:
[{
{Class:time: "Summer2015-11-19",
2013"start: 8.18,
max: 8.33,
min: 7.98,
end: 8.32,
volumn: 1810,
money: 14723.56,
},Grade:{
time: "C",Score: 72.5,}2015-11-18",
{Class:start: "Summer8.37,
2013",Grade:max: "C",Score:8.6,
77.5,min: 8.03,
end: 8.09,
volumn: 2790.37,
money: 23309.19,
},
......
]
  • 內距

40, 40, 60, 6030,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

Class( timeX軸)
列表 設定值
欄位 Classtime
類型 cattimeCat
刻度數量 510
優化數據範圍 開啟
時間格式MM-DD
volumn( Y軸 )
列表設定值
欄位volumn
類型linear
優化數據範圍開啟
最小值0
最大值30000
range( Y軸 )
列表設定值
欄位range
類型linear
刻度間距2
優化數據範圍開啟
最小值0
最大值18
  • 軸座標 Axis

Score(time( X軸 )
列表 設定值
欄位 Scoretime
啟用 開啟
位置left
Class(volumn( Y軸 )
列表 設定值
欄位 Classvolumn
啟用 開啟
刻度現 - 顏色#A14242
次要刻度 - 數量2
次要刻度 - 顏色#A14242關閉
  • 圖 Geom

K線圖(point) schema )
列表 設定值
欄位

Class*Scoretime*range

類型 K線
顏色欄位 Gradetrend
顏色
function(val) {
 return (val == 'up')? '#f04864':'#2fc25b';
}
形狀 circlecandle
柱狀圖( interval )
|Jitter
列表設定值
欄位time*volumn
大小參數類型 4柱狀圖
調整顏色欄位 擾動trend
顏色
function(val) {
 return (val == 'up')? '#f04864':'#2fc25b';
}
  • 圖示 Legend

列表 設定值
啟用 開啟
欄位 Classrange
位置
排版 水平
水平偏移量15