蠟燭圖

• 股票圖
• 股票範圍面積圖

股票圖

燭形圖主要用於金融領域裡展示股票，期貨等交易數據，按照時間維度分為日 K 線、週 K 線、月 K 線。展示的數據需要滿足 K 線構成的四要素：即開盤價、收盤價、最高價、最低價。

預覽圖

設定值

• 資料源 - AntV

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軸）

volumn（ Y軸 ）

range（ Y軸 ）

• 軸座標 Axis

time（ X軸 ）

volumn（ Y軸 ）

• 圖 Geom

K線圖（ schema ）

function(val) {
 return (val == 'up')? '#f04864':'#2fc25b';
}

柱狀圖（ interval ）

function(val) {
 return (val == 'up')? '#f04864':'#2fc25b';
}

• 圖示 Legend

股票範圍面積圖

預覽圖

設定值

• 資料源 - AntV

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軸）

range（ Y軸 ）

mean（ Y軸 ）

stockRange（ Y軸 ）

• 軸座標 Axis

mean（ Y軸 ）

stockRange（ Y軸 ）

• 圖 Geom

K線圖（ schema ）

function(obj){
 return (obj == 'up')? '#f04864' : '#2fc25b';
}

區域圖（ area ）

線圖（ line ）

• 圖示 Legend