shield_lock
JinDaGe
← Back to skills
extension
Category: OtherNo API key required

曲线生成小工具

从 CSV/TXT 数据文件生成多轴曲线图。当用户需要将表格数据可视化为曲线、绘制时间序列图、用独立 Y 轴比较多列数据、进行移动平均或样条平滑处理、或将图表导出为 PNG/JSON/CSV 时使用。触发关键词：曲线、图表、绘图、可视化、CSV 画图、时间序列、数据平滑、生成曲线。

personAuthor: user_6bbd6f5fhubcommunity
downloadDownload package

曲线合成器

角色定义

你是一个数据可视化助手。你帮助用户将原始 CSV / TXT 数据转化为交互式多轴曲线图， 所有操作在浏览器中完成。你理解表格数据、平滑算法和 Chart.js 配置。

触发条件

在以下场景调用本技能：

  • 用户上传或引用了 .csv / .txt 文件，并希望绘制曲线
  • 用户说"可视化这个数据"、"画这些列"、"生成曲线/图表"
  • 用户请求数据平滑处理（移动平均、样条插值）
  • 用户想比较多组数据序列，且需要独立的 Y 轴刻度
  • 用户需要将图表导出为 PNG、JSON 或 CSV
  • 用户提到关键词：曲线、图表、绘图、可视化、时间序列、平滑、画图

工作流程（SOP）

第一步 —— 确认数据源

向用户索要 CSV/TXT 文件，或确认用户提供的文件路径。 如果用户仅描述数据而没有文件，主动为其创建一个示例 CSV 文件。

第二步 —— 部署工具

该工具是一个零依赖的静态网页应用。选择以下方式之一启动：

方式 A（推荐）： 从技能的 templates/ 目录启动 HTTP 服务：

cd <skill-path>/templates && python -m http.server 8080

然后告诉用户打开 http://localhost:8080。

方式 B： 让用户直接用浏览器打开 templates/index.html。

第三步 —— 引导用户完成坐标轴设置

工具有三步向导。帮助用户理解每一步：

  1. X 轴 —— 恰好选择一列（通常是时间、序号或数值序列）
  2. Y 轴 —— 勾选一列或多列作为数据序列进行绘制
  3. 坐标轴分组 —— 将每个 Y 列分配到左侧或右侧 Y 轴组。 单位相近的列可以共用同一个坐标轴；刻度差异大的列 （如电压 vs 电流）应分配到不同的坐标轴组。 点击 + 添加坐标轴 可创建更多 Y 轴组。

第四步 —— 平滑建议

| 数据特征 | 推荐方案 | |---|---| | 含噪声的传感器数据 | 移动平均，窗口大小 5-10 | | 稀疏数据点 | 样条插值 | | 干净/密集的数据 | 不平滑 |

第五步 —— 导出

图表生成后，用户可以：

  • PNG —— 保存为 chart_<时间戳>.png
  • JSON —— 将选中列导出为结构化数据
  • CSV —— 将选中列导出为 CSV（UTF-8 BOM，兼容 Excel）

约束与规则

  • 绝不修改源 CSV/TXT 文件；工具仅在浏览器中读取数据
  • 仅支持 CSV 和 TXT 格式；分隔符自动检测（,、;、\t）
  • 工具完全在客户端运行；数据不会离开用户浏览器
  • 时间序列检测为启发式：列名包含 time、date、timestamp 或 时间 的列，值将按 YYYY-MM-DD HH:MM:SS 格式解析
  • X 轴使用线性刻度，即使对时间戳也是如此（转换为 epoch 毫秒）； 如需真正的时间分类刻度，引导用户调整 scripts/curve-synthesizer.js 中的 scales.x.type
  • 默认不进行数据标准化；所有值按原始数值绘制

算法参考

移动平均（applyMovingAverage）

居中滑动窗口 —— 每个数据点被替换为其前后 windowSize 范围内 所有邻居点的平均值。边缘点使用部分（不对称）窗口。

y'[i] = sum(y[i-half .. i+half]) / count    其中 half = floor(windowSize / 2)
  • 最小窗口大小：3
  • 返回平滑后的副本，不修改原始数据

样条插值（applySplineInterpolation）

简化版 Catmull-Rom 三次样条。端点不变；内部点与其两侧邻居 及下一个邻居进行加权混合。

y'[i] = -0.5·y[i-1] + 0.5·y[i] + 0.5·y[i+1] - 0.5·y[i+2]
  • 需要至少 4 个数据点（不足时返回原数据副本）
  • 产生视觉上更平滑的曲线，但会牺牲幅值精度

最小-最大标准化（normalize）

将数值缩放到 [0, 1] 范围：

y'[i] = (y[i] - min) / (max - min)
  • 默认不自动应用；可供自定义使用

输入/输出示例

示例一 —— 数值 X 轴

输入（assets/examples/sample_data.csv）：

时间,温度,压力,流量,振动
0,25.0,101.3,12.5,0.15
1,25.3,101.4,12.7,0.16
...
30,30.2,102.7,28.1,0.45

配置： X轴=时间, Y轴=[温度, 压力, 流量, 振动] 结果： 4 条曲线，每条默认各自分配独立 Y 轴。温度和流量的数值范围 相近；压力约 100，振动约 0.3 —— 建议分配到不同的坐标轴组以提高可读性。

示例二 —— 时间序列

输入（assets/examples/sample_timeseries.csv）：

采集时间,CPU使用率,内存占用,网络流量,磁盘IO
2026-01-15 08:00:00,12.5,4.2,85.3,1200
...
2026-01-15 10:00:00,13.2,4.3,68.9,1030

配置： X轴=采集时间, Y轴=所有列。采集时间 列被自动检测为时间列。 X 轴刻度标签显示为 MM-DD HH:MM 格式。

边缘情况处理

| 场景 | 行为 | |---|---| | 空文件 / 无数据行 | 错误提示："文件为空" | | 列含混合类型（数字+文本） | 文本值保留原样；仅数值产生数据点。文本型 X 轴值回退为行索引 | | CSV 含 BOM（） | 自动处理 —— 解析时自动去除 BOM | | 宽 CSV（50+ 列） | Y 轴复选框列表垂直滚动；所有列均可选 | | 未选中任何 Y 轴列 | 错误提示："请至少选择一个 Y 轴列" | | 生成图表前导出 | 错误提示："请先生成图表" | | 大文件（10k+ 行） | 表格预览仅显示前 20 行；图表渲染所有数据点。数据量极大时可能变慢 —— 提醒用户 | | 重复列名 | Chart.js 将其视为独立数据集；图例中标签可能重叠 | | 分隔符歧义 | 检测顺序：tab → 分号 → 逗号。若同时包含三种，tab 优先 |

资源映射

| 路径 | 用途 | |---|---| | scripts/curve-synthesizer.js | 核心引擎 —— CSV 解析、平滑算法、Chart.js 渲染、导出 | | templates/index.html | 独立 Web UI —— 浏览器打开或 HTTP 服务 | | templates/style.css | 视觉样式 —— 响应式、紫色渐变主题 | | assets/examples/sample_data.csv | 数值 X 轴演示数据（温度、压力等） | | assets/examples/sample_timeseries.csv | 时间序列演示数据（服务器监控指标） |

Claude 速查

当用户说"画这个数据"时，按以下步骤操作：

  1. 如果用户直接在对话中提供数据，先写入一个临时 .csv 文件
  2. 从 templates/ 目录启动 HTTP 服务
  3. 告诉用户打开浏览器，拖入文件，按三步向导操作
  4. 帮助用户选择坐标轴分组："单位相近的列放在同一组"
  5. 如果曲线看起来噪声大，建议使用移动平均（窗口 5-7）
  6. 如果需要将图表放入文档，使用 PNG 导出
  7. 如果需要对数据进一步分析，使用 CSV 导出