使用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.

部分细节介绍:

变量设置:

点击Dashboard仪表板右上角的Settings

然后设置以下2个变量,

这里我用的是SQL语句查询出变量,需要添加一个数据库源,这里省略添加数据库源的步骤.也可以通过请求API接口实现.

引用变量时在名称前添加 $,如:$ end_date

其中 main_continue的配置如下:主要就是设置变量名称,以及对应SQL语句.

指定品种的k线数据是通过tqsdk 以下接口获取的,官方连接在这里:获取k线序列数据 --- TianQin Python SDK 3.7.8 文档

复制代码

get_kline_serial(symbol: https://docs.python.org/3/library/stdtypes.html#str | https://docs.python.org/3/library/typing.html#typing.List[https://docs.python.org/3/library/stdtypes.html#str], duration_seconds: https://docs.python.org/3/library/functions.html#int, data_length: https://docs.python.org/3/library/functions.html#int = 200, adj_type: https://docs.python.org/3/library/stdtypes.html#str | https://docs.python.org/3/library/constants.html#None = None, **kwargs)→ DataFrame

infinity-datasource 数据源配置

假设GET请求

python 复制代码

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

接口返回的数据格式如下:

javascript 复制代码

{
  "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": "[email protected]",
                "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": "[email protected]",
                "open": 76568,
                "open_interest": 171959,
                "update_time": null,
                "volume": 800
              },
    ]
}

则需要参照如下配置infinity请求;

可视化配置选择: Business Charts

Editor Mode 选择 Code

然后在Code 中粘贴下方的代码内容:

javascript 复制代码

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线(蜡烛图)功能.