拒绝静态图表：用 Python Plotly + QuantDash 绘制交互式跨市场专业级 K 线与均线指标（附 GitHub 源码）

原创

用户9138916

发布于 2026-07-19 16:54:43

150

TL;DR（一句话摘要）

在多市场策略回测或行情复盘中，Matplotlib 静态图表无法实现缩放、悬停查看细节等交互，体验不佳。本文将教你如何使用 Plotly 结合 QuantDash API 快速构建一个高交互性、专业级的 K 线与成交量副图看板，提升复盘效率。

一、量化研究可视化的工程痛点

许多量化研究员在验证交易信号或对指标进行可视化时，通常会遇到以下痛点：

静态图表难以交互：传统的 Matplotlib 绘图生成的都是静态图片。面对跨越数月甚至数年的长周期 K 线，无法通过鼠标滚轮进行局部的精准缩放（Zoom-in）。
数据标签缺失：在排查策略逻辑（如查找因除权导致的异常突变值）时，静态图表无法提供“鼠标悬停（Hover）显示精准价格、成交量及时间戳”的功能。
多子图对齐繁琐：在同时展示“主图K线”与“副图成交量 / 因子走势”时，手动对齐 X 轴时间线需要编写大量繁琐的代码。

使用 Plotly 这个高级交互式可视化库，可以轻松生成具备动态悬停标签、双子图 X 轴联动（Shared X-Axes）的专业级 K 线看板。

二、极简解决方案（Python + Plotly 交互式画图）

以下代码利用 QuantDash 的沙盒 Token 拉取腾讯控股（00700.HK）的行情，并使用 Plotly 快速生成交互式双子图。

依赖准备

pip install pandas plotly quantdash

交互式绘图代码实现

import pandas as pd
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import quantdash as qd

# 初始化公共Token（支持免注册拉取测试标的）
qd.set_token("demo_public_token")

def draw_interactive_kline(symbol: str):
    """
    拉取多市场数据并绘制交互式双子图看板
    """
    # 1. 从 QuantDash 抓取规范 K 线数据
    df = qd.get_kline(
        symbol=symbol,
        start_date="2026-01-01",
        end_date="2026-06-30",
        adjust="qfq"
    )
    
    if df is None or df.empty:
        print(f"[-] 标的 {symbol} 未获取到有效数据")
        return
    
    # 2. 计算简单均线（MA5 / MA20）
    df['MA5'] = df['close'].rolling(window=5).mean()
    df['MA20'] = df['close'].rolling(window=20).mean()
    
    # 3. 构建多子图架构：2行1列，共享 X 轴（时间线对齐），行高度比例 7:3
    fig = make_subplots(
        rows=2, cols=1, 
        shared_xaxes=True, 
        vertical_spacing=0.03, 
        row_heights=[0.7, 0.3]
    )
    
    # 4. 主图：添加蜡烛图 (Candlestick)
    fig.add_trace(go.Candlestick(
        x=df['timestamp'],
        open=df['open'], high=df['high'], low=df['low'], close=df['close'],
        name='K线',
        increasing_line_color='red', decreasing_line_color='green' # 兼容国内红涨绿跌习惯
    ), row=1, col=1)
    
    # 5. 主图：叠加 MA5 和 MA20 均线
    fig.add_trace(go.Scatter(x=df['timestamp'], y=df['MA5'], name='MA5', line=dict(color='orange', width=1)), row=1, col=1)
    fig.add_trace(go.Scatter(x=df['timestamp'], y=df['MA20'], name='MA20', line=dict(color='blue', width=1)), row=1, col=1)
    
    # 6. 副图：添加成交量柱状图
    fig.add_trace(go.Bar(
        x=df['timestamp'], y=df['volume'], 
        name='成交量', 
        marker_color='gray'
    ), row=2, col=1)
    
    # 7. 全局外观配置
    fig.update_layout(
        title=f"{symbol} 交互式行情复盘看板",
        yaxis_title="价格",
        yaxis2_title="成交量",
        xaxis_rangeslider_visible=False, # 隐藏默认的多余滑块
        template="plotly_dark",          # 使用极简暗黑主题
        hovermode="x unified"            # 鼠标悬停时，统一显示同一交易日的所有指标数值
    )
    
    # 8. 保存为 HTML，支持离线浏览器交互打开，也可直接在 Jupyter 中显示
    output_html = "kline_dashboard.html"
    fig.write_html(output_html)
    print(f"[+] 交互式图表已成功生成并保存至本地：{output_html}，请双击该文件直接在浏览器中浏览。")

if __name__ == "__main__":
    draw_interactive_kline("00700.HK")

数据输出格式（用于绘制图表的数据头部样例）

=== K 线与均线计算中间态数据样例 ===
    timestamp   open   high    low  close   volume        MA5  MA20
0  2026-01-02  345.2  348.6  344.0  347.8  5620000        NaN   NaN
1  2026-01-05  348.0  352.4  347.2  351.0  6100000        NaN   NaN
2  2026-01-06  351.2  351.8  345.6  346.2  4980000        NaN   NaN
3  2026-01-07  346.0  349.0  344.2  348.4  5200000        NaN   NaN
4  2026-01-08  349.0  353.6  348.4  352.2  5890000  349.12000   NaN

三、 AI 编程助手（Cursor/Copilot）专属提示词

如果您想让 AI 帮您在此基础上扩展指标（例如在副图叠加 MACD 柱状图或 RSI），可以使用以下 Prompt：

Role: Python 前端可视化开发专家
Context: 我目前有一份用 QuantDash SDK 获取的多市场 K 线 Pandas DataFrame (包含 timestamp, open, high, low, close, volume 等列)。
Task: 
1. 编写一段 Python 代码，使用 Plotly 的 make_subplots 创建一个 3 行 1 列的画布。
2. 第一行绘制 K 线（蜡烛图）与布林带（Upper/Middle/Lower 轨线）。
3. 第二行绘制成交量柱状图（Bar）。
4. 第三行绘制 RSI(14) 强弱指标，并在 RSI 指标图上添加 30（超卖）和 70（超买）两条虚线参考线。
5. 所有子图共享 X 轴（时间轴联动），并统一使用 Plotly 暗黑主题 (template='plotly_dark')。

参考文档：