Skip to main content

基礎雷達圖

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

預覽圖

範例股票圖.png基礎雷達圖.png

設定值

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

  • 前置處理函數 Transform

數據加工（字串展開（ 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

  • 比例尺 Scale

time（X軸）
列表 設定值 欄位 time 類型 timeCat 刻度數量 10 優化數據範圍 開啟 時間格式 MM-DD
volumn（score（ Y軸 ）
列表 設定值
欄位 volumnscore
類型 linear
優化數據範圍 開啟 最小值 0 最大值 30000
range（ Y軸 ）
列表 設定值 欄位 range 類型 linear 刻度間距 2 優化數據範圍 開啟 最小值 0 最大值 1880

  • 軸座標 Axis

time（item（ X軸 ）
列表 設定值
欄位 timeitem
啟用 開啟
volumn（ Y軸 ）
列表軸線 設定值- 欄位顏色 volumntransparent 啟用 關閉

  • 圖 Geom

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

  • 圖示 Legend

列表 設定值
啟用 開啟
欄位 rangeuser
位置 下
排版 水平

    極坐標 Coord

    水平偏移量列表 15設定值 類型 極坐標系
    Back to top