Skip to main content

股票範圍面積圖

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

預覽圖

範例股票圖.png股票範圍面積圖.png

設定值

https://g2.antv.vision/zh/examples/data/candle-sticks.stock-03.json
（ 資料來源：AntV ）

格式:格式：
[{
time:date: "2015-11-19"1186444800000,
range: [22.258032033902,25.4889359321959,],
start: 8.18,
max: 8.33,
min: 7.98,22.75,
end: 8.32,23.44,
volumn:lowest: 1810,22.69,
money:highest: 14723.56,23.7,
mean: 23.335,
trend: "up",
},{
time:date: "2015-11-18"1186358400000,
range: [22.2381666799343,25.3786666401314,],
start: 8.37,
max: 8.6,
min: 8.23.03,
end: 8.09,22.97,
volumn:lowest: 2790.37,22.44,
money:highest: 23309.19,23.15,
mean: 23.285,
trend: "down",
},
......
]

  • 內距

40,30, 40, 80,40 60

  • 前置處理函數 Transform

數據加工（ map ）
列表 設定值
類型
數據加工 加工函數 
function callback(obj) {

 obj.trend = obj.start <= obj.end ? 'up' : 'down';
 obj.rangestockRange = [obj.start, obj.end, obj.max,highest, obj.min]lowest];

 return obj;
}

  • 比例尺 Scale

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

    軸座標 Axis

    time（ X軸 ）
    列表 設定值 欄位 time 啟用 開啟35
    volumn（mean（ Y軸 ）
    列表 設定值
    欄位 volumnmean
    類型 linear 優化數據範圍 開啟 最小值 20 最大值 35
    stockRange（ Y軸 ）
    列表 設定值 欄位 stockRange 類型 linear 優化數據範圍 開啟 最小值 20 最大值 35

      軸座標 Axis

      mean（ Y軸 ）
      列表 設定值 欄位 mean 啟用 關閉
      stockRange（ Y軸 ）
      列表 設定值 欄位 stockRange 啟用 關閉

      • 圖 Geom

      K線圖（ schema ）
      列表 設定值
      欄位

      time*rangedate*stockRange
      類型 K線圖
      顏色欄位
      trend 顏色 
      function(val) obj){
      
 return (valobj == 'up')? '#f04864' : '#2fc25b';
}
      }
      形狀 candle
      柱狀圖（區域圖（ intervalarea ）
      列表 設定值
      欄位 time*volumndate*range
      類型 柱狀圖
      顏色欄位 trend區域圖 顏色 #64b5f6 
      function(val)
      {
      return
      線圖（ (valline ==）
      'up')?
      '#f04864':'#2fc25b';
      } 列表 設定值 欄位 date*mean 類型 線圖 顏色 #FACC14

      • 圖示 Legend

      列表 設定值
      啟用 開啟
      欄位 rangetrend
      位置 下
      排版 水平
      水平偏移量 15
      Back to top