基礎雷達圖
燭形圖主要用於金融領域裡展示股票,期貨等交易數據,按照時間維度分為日 K 線、週 K 線、月 K 線。展示的數據需要滿足 K 線構成的四要素:即開盤價、收盤價、最高價、最低價。
預覽圖
設定值
https://g2.antv.vision/zh/examples/data/candle-sticks.json
( 資料來源:AntV )
格式:
[{
time:item: "2015-11-19"'Design',
start:a: 8.18,70,
max:b: 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,30
}, ......{
item: 'Development',
a: 60,
b: 70
}, {
item: 'Marketing',
a: 50,
b: 60
}, {
item: 'Users',
a: 40,
b: 50
}, {
item: 'Test',
a: 60,
b: 70
}, {
item: 'Language',
a: 70,
b: 50
}, {
item: 'Technology',
a: 50,
b: 40
}, {
item: 'Support',
a: 30,
b: 40
}, {
item: 'Sales',
a: 60,
b: 40
}, {
item: 'UX',
a: 50,
b: 60
}]
40,30,80,4050, 50, 80
數據加工字串展開( mapfold )
列表 |
設定值 |
加工函數類型 |
字串展開 |
function
callback(obj)
{
要展開的欄位 |
obj.trenda,b |
=
obj.start
<=保留欄位 |
obj.enditem |
?
'up'
:Key |
'down';
user |
obj.range
=
[obj.start,Value |
obj.end, obj.max, obj.min];
return obj;}
score |
time(X軸)
列表 |
設定值 |
欄位 |
time |
類型 |
timeCat |
刻度數量 |
10 |
優化數據範圍 |
開啟 |
時間格式 |
MM-DD |
volumn(score( Y軸 )
列表 |
設定值 |
欄位 |
volumnscore |
類型 |
linear |
優化數據範圍 |
開啟 |
最小值 |
0 |
最大值 |
30000 |
range( Y軸 )
列表 |
設定值 |
欄位 |
range |
類型 |
linear |
刻度間距 |
2 |
優化數據範圍 |
開啟 |
最小值 |
0 |
最大值 |
1880 |
time(item( X軸 )
volumn( Y軸 )
列表 | 軸線 設定值 | -
欄位顏色 |
volumntransparent |
啟用 |
關閉 |
K線線圖( schema )line)
列表 |
設定值 |
欄位 |
time*rangeitem*score
|
類型 |
K線線圖 |
顏色欄位 |
trenduser |
顏色 |
function(val) {
return (val == 'up')? '#f04864':'#2fc25b';
}
|
形狀大小 |
candle2 |
柱狀點圖( interval )point)
列表 |
設定值 |
欄位 |
time*volumnitem*score |
類型 |
柱狀點圖 |
顏色欄位 |
trenduser |
形狀 |
circle |
大小 |
4 |
樣式 - 顏色 |
#ffffff |
function(val)
{
return樣式 (val- ==寬度 |
'up')?1 |
'#f04864':'#2fc25b';
}
區域圖( area )
列表 |
設定值 |
欄位 |
item*score |
類型 |
區域圖 |
顏色欄位 |
user |
列表 |
設定值 |
啟用 |
開啟 |
欄位 |
rangeuser |
位置 |
下 |
排版 |
水平 |