SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场web-data-visualization

web-data-visualization

数据与分析

查看项目

更新于 10-16 04:46

技能介绍

用途

本技能是一个网页数据可视化工作流，输入为 web/_design/data.json，输出为 web/scripts/ 下的交互式图表实现。目标是把报告类数据（股价走势、HBM 市场份额、5 年业绩、情景分析、市场共识、风险矩阵、NVIDIA 供应矩阵）转化为可交互的网页图表。

主要能力

  • 图表库选型：折线/柱状/环形/组合图推荐 Chart.js v4（CDN：cdn.jsdelivr.net/npm/chart.js@4）；热力图、桑基图及复杂交互推荐 Apache ECharts v5（CDN：cdn.jsdelivr.net/npm/echarts@5）；自定义扇形图与复合 SVG 仅在必要时使用 D3.js v7（d3js.org/d3.v7.min.js）。辅助动效可用 GSAP（若 motion-designer 已在使用则共享）。原则是单一站点只使用 1~2 个库，标准图表用 Chart.js，特殊图表（矩阵、桑基）用 ECharts。
  • 图表组件映射：chart-price（data.priceHistory + data.snapshot.high52w/low52w，Chart.js，折线+面积填充+标记）；chart-revenue-trend（data.revenueByYear，Chart.js，组合图：柱状为营收/OP，折线为 OPM 副轴）；chart-hbm-share（data.hbmShare2026，Chart.js，三个环形图，bit/revenue/hbm4 切换）；chart-nvidia-supply（data.nvidiaSupplyMatrix，ECharts，热力图，行为 GPU、列为供应商）；chart-consensus（data.consensus.targets，Chart.js，横向点图+均值线）；chart-scenarios（data.scenarios，Chart.js 或 D3，扇形图或箱形，Bear/Base/Bull）；chart-risk-matrix（data.riskMatrix，ECharts，3×3 热力图+标签）。
  • 各图表实现要点：价格图支持 1M/3M/6M/1Y/YTD 区间切换、悬停显示精确价格/日期/涨跌、52 周高低点标记、按涨跌区域使用 bull(#10b981)/bear(#ef4444) 渐变；营收趋势图 FY26E 用虚线或图案表示预估，FY23 亏损以负值表现；HBM 环形图可切换 bit/revenue/HBM4 forecast，中心显示当前选中项名称与 SK 份额；NVIDIA 供应矩阵热力图单元格值 0=无供应、1=辅助、2=主力、3=独家，点击单元格显示详情（HBM 世代、容量等）；共识图 X 轴为目标价、Y 轴为券商名，含现价与均值竖线，颜色 Buy=绿/Hold=橙/Sell=红；情景图横轴为现价→12 个月、纵轴为股价区间，三情景按颜色区分（Bear=红/Base=灰蓝/Bull=绿）并标注概率百分比，可切换高亮；风险矩阵为 3×3 热力图，单元格内标注风险项名称，右侧面板点击显示详情。
  • 通用交互：使用 IntersectionObserver 在滚动进入时初始化图表（threshold 0.3），并响应 prefers-reduced-motion（减少动效时关闭动画，否则 duration 800、easing easeOutCubic）。
  • 图表容器规范：统一使用 .chart-container[data-chart] 结构，包含 chart-header（标题、副标题、可选切换按钮）、chart-body（canvas 或 div）、chart-footer（来源）。
  • 统一入口：web/scripts/charts.js 导入 7 个图表初始化函数，fetch data.json 后通过 IntersectionObserver 懒加载初始化。
  • 可视化笔记：在 web/_design/visualization-notes.md 记录所用库/版本/CDN、7 个图表的数据映射与交互规范、颜色令牌映射、移动端简化规则、数据缺失（N/A）处理方式。

使用方式

按工作流执行：Step 1 选库（CDN）；Step 2 图表组件映射；Step 3 在 web/scripts/chart-configs/ 下逐图表实现；Step 4 应用通用交互模式；Step 5 与 frontend-engineer 共享容器 HTML 结构；Step 6 通过 charts.js 统一入口懒加载；Step 7 编写 visualization-notes.md。团队协作方面：从 design-lead 接收 data.json、颜色令牌与推荐图表类型；向 frontend-engineer 发送图表容器 HTML 结构与初始化函数规范；与 motion-designer 协调滚动进入的 stagger 以避免动效冲突；向 web-qa 提供 visualization-notes.md 并请求数据一致性验证。后续执行时保留既有图表代码，仅修改需要变更的图表；data.json 变更时只更新受影响的图表。

适用场景

适用于将结构化报告数据（金融/半导体行业报告等）构建为网页交互式图表的场景，尤其是需要多种图表类型、滚动进入动画、响应式与无障碍支持的静态站点或报告页面。

限制与工作原则

  • 数据准确性：以 data.json 为单一数据源，禁止任意加工；需要修改时向 design-lead 请求。
  • 颜色：仅使用 viz-1~8 颜色令牌，禁止随意新增颜色。
  • 响应式：使用 ResponsiveContainer 或 Chart.js responsive: true + maintainAspectRatio: false，移动端简化标签。
  • 无障碍：图表旁提供文本摘要（供屏幕阅读器的 <table> 或 aria-label）。
  • 性能：懒加载（滚动进入时初始化），可复用则复用图表实例。
  • 关于收费、价格、平台支持范围等未在资料中说明的信息，暂未提供。