先看實現(xiàn)的結(jié)果

滬銅主力合約 2025-02-12 的1分鐘k線圖

功能介紹: 左上角支持切換主力合約,日期,實現(xiàn)動態(tài)加載數(shù)據(jù).

項目背景: 我想通過前端展示期貨指定品種某1天的1分鐘k線,類似tqsdk 的web_gui

生成圖形化界面— TianQin Python SDK 3.7.8 文檔

項目架構(gòu):

后端: fastapi

期貨行情數(shù)據(jù): tqsdk?獲取k線序列數(shù)據(jù) — TianQin Python SDK 3.7.8 文檔

前端:?Grafana v11.5.0, 需要的插件:?Business Charts(支持ECharts的插件),infinity(請求api后端的接口)

Business Charts插件需求如下:

Requirements

• The Business Charts panel 6.X requires?Grafana 10?or?Grafana 11.
• Apache ECharts panel 5.X requires?Grafana 9?or?Grafana 10.
• Apache ECharts panel 3.X and 4.X require?Grafana 8.5?or?Grafana 9.

部分細(xì)節(jié)介紹:

1. 變量設(shè)置:

點(diǎn)擊Dashboard儀表板右上角的Settings

?

然后設(shè)置以下2個變量,

這里我用的是SQL語句查詢出變量,需要添加一個數(shù)據(jù)庫源,這里省略添加數(shù)據(jù)庫源的步驟.也可以通過請求API接口實現(xiàn).

引用變量時在名稱前添加 $,如: $end_date

其中 main_continue的配置如下:主要就是設(shè)置 變量名稱,以及對應(yīng)SQL語句.

2. 指定品種的k線數(shù)據(jù)是通過tqsdk 以下接口獲取的,官方連接在這里:獲取k線序列數(shù)據(jù) — TianQin Python SDK 3.7.8 文檔

get_kline_serial(symbol:?str?|?List[str],?duration_seconds:?int,?data_length:?int?=?200,?adj_type:?str?|?None?=?None,?**kwargs)→?DataFrame

3.?infinity-datasource 數(shù)據(jù)源配置

假設(shè)GET請求

/kline/?main_continue=KQ.m%40SHFE.au&end_date=2025-02-11

接口返回的數(shù)據(jù)格式如下:

{"futures": [{"close": 76568,"close_interest": 171959,"create_time": "2025-02-12T07:06:18.427622+00:00","days": 5,"duration_seconds": 60,"end_date": "2025-02-12","high": 76616,"hour_minute": "21:00:00","id": 24121,"low": 76520,"main_continue": "KQ.m@SHFE.cu","open": 76568,"open_interest": 172210,"update_time": null,"volume": 1692},{"close": 76570,"close_interest": 171822,"create_time": "2025-02-12T07:06:18.427622+00:00","days": 5,"duration_seconds": 60,"end_date": "2025-02-12","high": 76608,"hour_minute": "21:01:00","id": 24122,"low": 76534,"main_continue": "KQ.m@SHFE.cu","open": 76568,"open_interest": 171959,"update_time": null,"volume": 800},]
}

則需要參照如下配置infinity請求;

4. 可視化配置選擇: Business Charts

Editor Mode 選擇 Code

然后在Code 中粘貼下方的代碼內(nèi)容:

const upColor = '#ec0000';
const upBorderColor = '#8A0000';
const downColor = '#00da3c';
const downBorderColor = '#008F28';context.panel.data.series.map((s) => {categories = s.fields.find((f) => f.name === 'hour_minute').values;open = s.fields.find((f) => f.name === 'open').values;close = s.fields.find((f) => f.name === 'close').values;low = s.fields.find((f) => f.name === 'low').values;high = s.fields.find((f) => f.name === 'high').values;
});let values = open.map((item, index) => [item, close[index], low[index], high[index],]);let data0 = { categoryData: categories, values: values }return {tooltip: {trigger: 'axis',axisPointer: {type: 'cross'}},legend: {data: ['1分鐘K線']},grid: {left: '10%',right: '10%',bottom: '15%'},xAxis: {type: 'category',data: data0.categoryData,boundaryGap: false,axisLine: { onZero: false },splitLine: { show: false },min: 'dataMin',max: 'dataMax'},yAxis: {scale: true,splitArea: {show: true}},series: [{name: '1分鐘K線',type: 'candlestick',data: data0.values,itemStyle: {color: upColor,color0: downColor,borderColor: upBorderColor,borderColor0: downBorderColor},}]
}

Code中的代碼:重點(diǎn)就是通過

context.panel.data.series.map

獲取到 infinity GET 請求并處理后的數(shù)據(jù)

完結(jié)撒花,以上就是通過 fastapi,grafana 實現(xiàn)的可視化k線(蠟燭圖)功能.