Displaying Live and Backtest Charts with TqSdk’s Web GUI
Summary
The document explains how to enable TqSdk’s browser-based chart interface by setting the API’s web GUI option. It describes using an automatically assigned local address or supplying a fixed address, then illustrates a live setup that subscribes to a futures contract’s short-interval bars and refreshes data in a loop. This is an interface and workflow guide rather than a trading study.
A second example enables the same display during a historical simulation. It calculates a moving average from recent bars and changes the target position depending on whether the latest close is above or below that average. The document says the interface can show charts and a more detailed simulation report, but provides no numerical performance results or assessment of the sample rule. The examples depend on the TqSdk environment, account authentication, and access to the relevant market or historical data; the illustrated moving-average logic is not evaluated as a standalone strategy.
Key ideas
- TqSdk can generate a browser-based chart interface through an API setting.
- The interface can be used with both live market data and historical simulations.
- The live example subscribes to a futures contract’s short-interval bars and refreshes them.
- The backtest example uses a moving-average comparison to set a target position.
- The document describes chart and report access but gives no strategy performance evaluation.
Tags
Full text
# 引入TqSdk模块
.. _web_gui:
策略程序图形化界面
====================================================
要在 TqSdk 中实现图形化界面非常简单，在 :py:class:`~tqsdk.TqApi` 中传入参数 web_gui = True即可，一套方案满足实盘/回测需求
对于需要固定web_gui网址的同学，可以传入本机IP端口 web_gui = "http://192.168.143.0:9876"（需填写本机IP端口） 来进行固定网址
实盘情况下的图形化界面
----------------------------------------------------
实盘下的示例代码::
# 引入TqSdk模块
from tqsdk import TqApi, TqAuth
# 创建api实例，设置web_gui=True生成图形化界面
api = TqApi(web_gui=True, auth=TqAuth("快期账户", "账户密码"))
# 订阅 cu2607 合约的10秒线
klines = api.get_kline_serial("SHFE.cu2607", 10)
while True:
# 通过wait_update刷新数据
api.wait_update()
当你运行该程序后，预期会显示如下两条信息::
2019-12-13 10:45:26,468 - INFO - 您可以访问 http://127.0.0.1:62964 查看策略绘制出的 K 线图形。
2019-12-13 10:45:27,422 - INFO - 通知: 与 wss://openmd.shinnytech.com/t/md/front/mobile 的网络连接已建立
点击访问地址后，显示网址效果如下:
.. figure:: ../images/web_gui_demo.png
回测情况下的图形化界面
----------------------------------------------------
回测情况下，设置完回测区间参数后传入web_gui=True，也可以用同样的方法来生成图形化地址::
from datetime import date
from tqsdk import TqApi, TqAuth, TqBacktest, TargetPosTask
# 在创建 api 实例时传入 TqBacktest 就会进入回测模式,设置web_gui=True开启图形化界面
api = TqApi(backtest=TqBacktest(start_dt=date(2026, 5, 18), end_dt=date(2026, 5, 22)),web_gui=True, auth=TqAuth("快期账户", "账户密码"))
# 获得 m2609 5分钟K线的引用
klines = api.get_kline_serial("DCE.m2609", 5 * 60, data_length=15)
# 创建 m2609 的目标持仓 task，该 task 负责调整 m2609 的仓位到指定的目标仓位
target_pos = TargetPosTask(api, "DCE.m2609")
while True:
api.wait_update()
if api.is_changing(klines):
ma = sum(klines.close.iloc[-15:]) / 15
print("最新价", klines.close.iloc[-1], "MA", ma)
if klines.close.iloc[-1] > ma:
print("最新价大于MA: 目标多头5手")
# 设置目标持仓为多头5手
target_pos.set_target_volume(5)
elif klines.close.iloc[-1] < ma:
print("最新价小于MA: 目标空仓")
# 设置目标持仓为空仓
target_pos.set_target_volume(0)
点击访问地址后，显示网址效果如下:
.. figure:: ../images/web_gui_klines.png
点击完整回测报告，显示更加详细的报告结果:
.. figure:: ../images/web_gui_backtest_report.png
如何在 TqSdk 中进行回测可以参见 :ref:`backtest`
.. _web_gui_replay:Shown in full with attribution under the source's licence. Licence: Apache-2.0
This summary was written by Stratmill's research agent from the original; it is not a copy of the source.