太原企业网站排名,xampp上传Wordpress,如何建设国外的网站,营销型网站建设营销型网站建设先看实现的结果
沪铜主力合约 2025-02-12 的1分钟k线图 功能介绍: 左上角支持切换主力合约,日期,实现动态加载数据.
项目背景: 我想通过前端展示期货指定品种某1天的1分钟k线,类似tqsdk 的web_gui
生成图形化界面— TianQin Python SDK 3.7.8 文档
项目架构:
后端: fastap…先看实现的结果
沪铜主力合约 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_continueKQ.m%40SHFE.auend_date2025-02-11
接口返回的数据格式如下:
{futures: [{close: 76568,close_interest: 171959,create_time: 2025-02-12T07:06:18.42762200: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.mSHFE.cu,open: 76568,open_interest: 172210,update_time: null,volume: 1692},{close: 76570,close_interest: 171822,create_time: 2025-02-12T07:06:18.42762200: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.mSHFE.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线(蜡烛图)功能.
