长安营销型网站建设免费建自己的网址
先看实现的结果
沪铜主力合约 2025-02-12 的1分钟k线图
功能介绍: 左上角支持切换主力合约,日期,实现动态加载数据.
项目背景: 我想通过前端展示期货指定品种某1天的1分钟k线,类似tqsdk 的web_gui
生成图形化界面— TianQin Python SDK 3.7.8 文档
项目架构:
后端: fastapi
期货行情数据: tqsdk 获取k线序列数据 — 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.
部分细节介绍:
1. 变量设置:
点击Dashboard仪表板右上角的Settings
然后设置以下2个变量,
这里我用的是SQL语句查询出变量,需要添加一个数据库源,这里省略添加数据库源的步骤.也可以通过请求API接口实现.
引用变量时在名称前添加 $,如: $end_date
其中 main_continue的配置如下:主要就是设置 变量名称,以及对应SQL语句.
2. 指定品种的k线数据是通过tqsdk 以下接口获取的,官方连接在这里:获取k线序列数据 — 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 数据源配置
假设GET请求
/kline/?main_continue=KQ.m%40SHFE.au&end_date=2025-02-11接口返回的数据格式如下:
{"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 中粘贴下方的代码内容:
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中的代码:重点就是通过
context.panel.data.series.map
获取到 infinity GET 请求并处理后的数据
完结撒花,以上就是通过 fastapi,grafana 实现的可视化k线(蜡烛图)功能.