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（ time（X軸）
    列表 設定值
    欄位 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

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

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

    • 圖示 Legend

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