使用grafana v11 建立k线(蜡烛图)仪表板

先看实现的结果

沪铜主力合约 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中的代码:重点就是通过