SkillsScout
DATA-ANALYSIS ／ 数据分析与可视化

KLineChart

收录日期 2026-08-21·来源仓库 ↗
受欢迎程度
8
可用程度与相关性
9
安全性
9
8.7SCOUT SCORE

1. 基本信息

项目 内容
名称 KLineChart
作者/维护者 klinecharts 组织（专职维护该库的 GitHub 组织，即库作者本人）
来源链接 https://github.com/klinecharts/KLineChart
许可证 Apache License 2.0（GitHub API 确认）
GitHub Stars 4,073（GitHub API 实测）
Forks 992（GitHub API 实测）
最新版本 v10.0.2（npm registry 实测）
安装方式 复制 skills/klinecharts/ 目录到 agent 的技能目录；配套库本体 npm install klinecharts

2. 功能介绍与亮点

KLineChart 是一个专注 K 线/蜡烛图等金融图表场景的轻量级 Canvas 图表库（零依赖，gzip 后约 40–50KB），本技能是官方随库附带的 Agent 集成指南。核心内容覆盖：v10 版 setDataLoader 数据加载模型（区分 init/forward/backward 三种拉取场景与实时推送 subscribeBar）、React 等框架的挂载/卸载/resize 生命周期写法、内置技术指标（BBI/BOLL/EMA/MA/SAR/SMA）与叠加绘图工具的创建与自定义注册、样式与坐标轴配置，以及一份完整的 v9→v10 API 迁移对照表；文末附 Troubleshooting 小节，针对“空白图表”“数据不更新”“分页失效”等常见故障给出排查路径。

亮点：官方一手维护，文档按“用户需求”而非“API 罗列”组织，新手可直接定位到对应小节；近期（2026-08-13）仍有代码提交，配套 npm 包月下载量超 15 万次，是有真实生产使用的成熟库（2019 年创建，已运行 7 年多）。

3. 适用场景

固定分类：数据分析与可视化

适合需要在 Web 或移动端应用中集成 K 线图、蜡烛图等金融/证券类可视化界面的开发者——典型场景包括量化交易看板、行情分析页面、加密货币行情展示、财务数据研究工具。技能不限定前端框架，原生 JS、React、Vue 均可套用其中的生命周期模式。

4. 跨 Agent 兼容性

判断依据：本技能 front matter 未使用任何平台专有扩展字段，纯 Markdown 指令正文，符合 Agent Skills 规范的最小公分母。

5. 推荐理由

官方维护的 K 线图表库集成指南，把数据加载模型、框架生命周期写法、v9→v10 迁移路径一次讲清楚，配合月均 15 万+ 的 npm 真实下载量，是目前索引内证据最扎实的图表类技能之一。

6. 评分

维度 分数 说明
受欢迎程度 8 GitHub 4,073 stars，处于 1k–5k 区间；npm 包 klinecharts 近 30 天下载量 153,718 次，提供了 stars 之外的独立真实使用证据
可用性 9 单文件复制即用；文档含最小示例、按场景路由表、故障排查、迁移对照表，近一周内仍有代码提交，依赖全部开源免费
安全性 9 见下方检查清单

安全检查清单： ① Shell/权限：纯 Markdown 指令文档，不含任何 shell 脚本或 exec 调用 ② 联网外发：技能本身不发起任何网络请求，教的是客户端渲染库，数据源由使用者自行提供 ③ 凭据：不涉及任何 API key 或凭据 ④ 可疑指令：通读全文 6,667 字节，未发现提示词注入或夹带无关推广内容 ⑤ 作者信誉：由专职维护该库的 klinecharts 组织出品，即库作者本人，无造假迹象 ⑥ License：Apache License 2.0，明确 ⑦ 维护时间：仓库创建于 2019-05-19，最近一次提交 2026-08-13，持续活跃维护超 7 年

7. 跟同类 Skills 相比的优势

技能 定位 与 KLineChart 的差异
antv-g2-chart-antvis-chart-visualization-skills AntV G2 通用图表语法技能 面向柱状图/折线图等通用统计图表，不专精 K 线/蜡烛图这类金融时序数据的专业交互（缩放、指标叠加、实时推送）
TanStack Charts 技能套件 TypeScript 通用图表文法，当前处于 pre-alpha 阶段 定位是从零设计通用可视化的完整方法论，尚未标注为生产可用；KLineChart 是单一成熟库（v10，2019 年至今）的专项集成指南，开箱即用性更高
通用前端图表库文档 多为纯 API 参考手册 普遍缺少“按场景路由 + 故障排查 + 版本迁移”三件套，新手定位所需内容效率更低

KLineChart 的差异化在于专精金融时序图表这一细分场景——内置技术指标与画线工具是通用图表库不会覆盖的能力，且作为官方一手技能，API 变化能第一时间同步进文档。

8. 用户评价

该技能所属的 KLineChart 库在第三方“金融图表库”横向评测文章中被列为轻量级 K 线图表方案之一，但目前尚未找到针对本技能（Agent 技能形态本身）的具名第三方用户评价。

9. 其他补充

仓库同时提供 CDN 引入方式（klinecharts.init(...) 全局对象），不强制要求 npm/打包工具链；另有配套的 Flutter 原生 K 线图库（kline_chart，独立包）服务 Web canvas 无法覆盖的移动端场景。

10. 安装使用方式

方式一（Agent Skill）：将仓库 skills/klinecharts/ 目录复制到所用 agent 的技能目录（如 Claude Code 的 ~/.claude/skills/klinecharts/），随后在项目中执行：

npm install klinecharts

安装后直接向 agent 提出“帮我用 KLineChart 加一个 K 线图”，技能会按 init → setSymbol → setPeriod → setDataLoader 的固定顺序生成集成代码。

方式二（手动）：跳过技能，直接参考官方文档 https://klinecharts.com/guide/data-integration 手动接入。

注意事项：v10 相较 v9 有 breaking change（applyNewData/updateData 等旧 API 已移除），仍在用 v9 的项目需先按技能内附的迁移对照表升级；容器元素必须显式设置宽高，否则图表渲染为空白。

11. 注意事项