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

# HTML股票查看器功能说明

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

## 功能概述

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

## 核心特性

### 1. 两种显示模式

#### 默认模式
```powershell
python scripts/generate_stock_viewer.py
```
- 仅显示满足收敛三角形条件的股票（14只）
- 适合日常快速选股
- 聚焦于有潜力的标的

#### 全股票模式（推荐）
```powershell
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：一键流水线（推荐）

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

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

### 方式2：单独生成HTML

```powershell
# 显示所有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模板

**核心代码结构**：
```javascript
// 内嵌数据
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：每日更新
```powershell
# 每天收盘后
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. ✅ **一键生成**：集成到流水线中

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