technical-patterns-lab/docs/2026-01-27_HTML查看器功能.md

HTML股票查看器功能说明

创建时间：2026-01-27
版本：v1.0
相关PR/Issue：HTML可视化查看器

功能概述

新增交互式HTML股票查看器，提供可视化的强度分筛选和查看功能。支持显示所有108只股票或仅显示满足条件的股票。

核心特性

1. 两种显示模式

默认模式

python scripts/generate_stock_viewer.py

• 仅显示满足收敛三角形条件的股票（14只）
• 适合日常快速选股
• 聚焦于有潜力的标的

全股票模式（推荐）

python scripts/generate_stock_viewer.py --all-stocks

• 显示所有108只股票
• 有形态：显示完整的强度分和指标
• 无形态：强度分为0，显示基础K线图
• 适合全面研究和对比分析

2. 交互式筛选

强度分滑块：

• 拖动范围：0.00 ~ 1.00
• 实时过滤股票列表
• 动态更新统计信息

示例：

• 滑块 = 0.00：显示全部108只股票
• 滑块 = 0.30：显示强度分 ≥ 0.3 的股票（中等以上）
• 滑块 = 0.50：显示强度分 ≥ 0.5 的股票（强势股）

3. 实时统计

顶部面板显示：

• 总股票数：数据集中的总股票数（108）
• 显示股票数：当前滑块筛选后的股票数
• 平均强度分：当前显示股票的平均强度分

4. 股票卡片

每张卡片包含：

• 头部：股票名称、代码（紫色渐变背景）
• 指标：
  • 突破方向（↑向上 / ↓向下 / -无）
  • 宽度比（收敛程度）
  • 触碰次数（上沿/下沿）
  • 放量确认（是/否）
• 强度分：大号显示，颜色分级
  • 🟢 绿色（≥ 0.5）：强势突破
  • 🟡 黄色（0.3 ~ 0.5）：中等强度
  • ⚪ 灰色（< 0.3）：微弱/无形态
• 图表：K线图和三角形趋势线（点击可放大）

5. 图表查看

• 点击图表：全屏查看细节
• 点击背景/按ESC：关闭全屏
• 高清显示：原始分辨率

技术实现

数据内嵌方案

问题：浏览器安全限制（CORS）阻止直接读取本地CSV文件

解决方案：

1. Python脚本读取 all_results.csv
2. 将数据转换为JSON格式
3. 内嵌到HTML的 <script> 标签中
4. JavaScript直接使用内嵌数据

优势：

• ✅ 无需启动Web服务器
• ✅ 可直接双击HTML打开
• ✅ 数据和页面完全独立
• ✅ 支持离线使用

文件结构

outputs/converging_triangles/
├── stock_viewer.html           # HTML查看器（包含内嵌数据）
├── QUICK_START.md              # 快速开始指南
├── README_viewer.md            # 详细使用说明
├── all_results.csv             # 原始数据（生成时读取）
└── charts/                     # 图表图片
    ├── 20260120_SH600000_浦发银行.png
    ├── 20260120_SH603900_莱绅通灵.png
    └── ...

使用流程

方式1：一键流水线（推荐）

# 生成所有数据 + HTML查看器
python scripts/pipeline_converging_triangle.py --all-stocks

# 打开查看器
start outputs/converging_triangles/stock_viewer.html

方式2：单独生成HTML

# 显示所有108只股票
python scripts/generate_stock_viewer.py --all-stocks

# 只显示满足条件的股票
python scripts/generate_stock_viewer.py

# 指定日期
python scripts/generate_stock_viewer.py --date 20260120 --all-stocks

# 打开查看器
start outputs/converging_triangles/stock_viewer.html

代码实现

新增脚本

scripts/generate_stock_viewer.py：

• 从 data/close.pkl 读取所有108只股票列表
• 从 all_results.csv 读取强度分数据
• 合并数据：有强度分的保留真实值，无强度分的设为0
• 生成HTML：将数据内嵌为JavaScript变量
• 支持 --all-stocks 和 --date 参数

Pipeline集成

scripts/pipeline_converging_triangle.py：

• 在步骤4自动调用 generate_stock_viewer.py
• 传递 --all-stocks 和 --date 参数
• 可通过 --skip-viewer 跳过HTML生成

HTML模板

核心代码结构：

// 内嵌数据
const allStocks = [
    {
        "code": "SH600000",
        "name": "浦发银行",
        "strength": 0.0,
        "hasTriangle": false,
        // ...更多字段
    },
    // ...更多股票
];

// 滑块事件
thresholdSlider.addEventListener('input', (e) => {
    currentThreshold = parseFloat(e.target.value);
    renderStocks();  // 重新渲染
});

// 渲染函数
function renderStocks() {
    // 过滤
    const filtered = allStocks.filter(s => s.strength >= currentThreshold);
    // 排序（强度分从高到低）
    filtered.sort((a, b) => b.strength - a.strength);
    // 生成HTML卡片
    // ...
}

设计亮点

1. 视觉设计

• 🎨 紫色渐变主题（优雅现代）
• 📱 响应式布局（自适应屏幕）
• ✨ 卡片悬停效果（视觉反馈）
• 🎯 颜色分级系统（快速识别）

2. 交互体验

• ⚡ 实时过滤（无延迟）
• 📊 动态统计（即时更新）
• 🔍 图表放大（细节查看）
• ⌨️ 键盘支持（ESC关闭）

3. 性能优化

• 🚀 数据内嵌（避免网络请求）
• 💾 图片懒加载（按需加载）
• 🎬 GPU加速动画（流畅体验）
• 📦 单文件部署（便于分发）

典型场景

场景1：快速筛选强势股

1. 打开HTML查看器
2. 拖动滑块到0.5
3. 只显示强度分≥0.5的股票
4. 点击图表查看细节

场景2：全面浏览

1. 滑块保持在0.00
2. 浏览全部108只股票
3. 按强度分从高到低排序
4. 对比有/无形态的差异

场景3：渐进式分析

1. 先看≥0.5的强势股（0只）
2. 降到≥0.4（1只）
3. 降到≥0.3（4只）
4. 观察不同强度级别的形态特征

场景4：每日更新

# 每天收盘后
python scripts/pipeline_converging_triangle.py --all-stocks

# 刷新浏览器
F5

文档体系

• 快速指南：outputs/converging_triangles/QUICK_START.md

  • 最简使用方法
  • 基础命令示例
  • 两种显示模式说明

• 详细文档：outputs/converging_triangles/README_viewer.md

  • 完整功能说明
  • 使用场景详解
  • 常见问题解答
  • 浏览器兼容性

• 功能特性：docs/all-stocks-feature.md

  • --all-stocks 参数说明
  • 图表生成行为
  • 典型使用场景

• 本文档：docs/2026-01-27_HTML查看器功能.md

  • 功能概述和设计思路
  • 技术实现细节
  • 代码结构说明

后续改进方向

短期（v1.1）

• 添加更多筛选条件（突破方向、宽度比等）
• 支持排序切换（按代码、名称、强度分）
• 添加搜索功能（按代码或名称）
• 支持导出筛选结果（CSV/JSON）

中期（v1.2）

• 多日期数据对比（时间轴滑块）
• 历史强度分趋势图
• 板块/行业分类筛选
• 自定义颜色阈值

长期（v2.0）

• 后端API支持（实时数据）
• 用户偏好保存（LocalStorage）
• 收藏夹功能
• 批量对比分析工具

相关文件

核心脚本

• scripts/generate_stock_viewer.py - HTML生成脚本
• scripts/pipeline_converging_triangle.py - 集成流水线

文档

• outputs/converging_triangles/QUICK_START.md - 快速指南
• outputs/converging_triangles/README_viewer.md - 详细文档
• docs/all-stocks-feature.md - 全股票功能说明
• USAGE.md - 完整使用说明

输出

• outputs/converging_triangles/stock_viewer.html - HTML查看器
• outputs/converging_triangles/charts/ - 图表图片目录

总结

HTML股票查看器提供了：

1. ✅ 可视化界面：直观的股票浏览体验
2. ✅ 交互式筛选：实时调整强度分阈值
3. ✅ 全面覆盖：支持显示所有108只股票
4. ✅ 离线可用：数据内嵌，无需服务器
5. ✅ 响应式设计：适配各种设备
6. ✅ 一键生成：集成到流水线中

这大大提升了数据分析和选股的效率，让用户可以更直观地理解和使用收敛三角形检测系统。