Menu
Turns CSV, Excel, or JSON data into a polished visual report page.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Generates an "editorial magazine × electronic ink" style horizontal-swipe web deck (a single HTML file), with a WebGL fluid background, serif headlines + sans-serif body, act dividers, big-number data pages, image grids, and more templates. Use when the user wants to make a talk / share / launch-style web deck, or mentions "magazine-style PPT", "horizontal swipe deck", "editorial magazine", or "e-ink presentation".
Online-course / workshop module deck — warm paper background + Playfair serif, persistent left sidebar of learning objectives, MCQ self-check page. Use for teaching modules, training materials, workshop slides.
暗底知识图谱 deck —
暗终端 honest-review deck —
奶油蓝图架构 deck — 奶油纸
GitHub 暗紫渐变 deck — GitHub-dark
| name | data-report |
| zh_name | 数据可视化报告 |
| en_name | Data Visualization Report |
| emoji | 📊 |
| description | Turns CSV, Excel, or JSON data into a polished visual report page. |
| zh_description | 把 CSV/Excel/JSON 数据转成漂亮的可视化报告页 |
| en_description | Turns CSV, Excel, or JSON data into a polished visual report page. |
| category | data |
| scenario | finance |
| aspect_hint | 桌面长页面 |
| featured | 10 |
| tags | ["data","report","chart","数据","报告"] |
| example_id | sample-data-weekly-report |
| example_name | 数据报告 · 周报 |
| example_format | csv |
| example_tagline | KPI 卡 + Chart.js 图表 + 表格 |
| example_desc | 9 个月增长数据自动渲染成可视化报告, 内联 Chart.js |
| od | {"mode":"prototype","surface":"web","platform":"desktop","scenario":"finance","upstream":"https://github.com/nexu-io/html-anything","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":false},"example_prompt":"Use the Data Visualization Report template to turn my CSV, Excel, or JSON data into a polished visual report page. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.","example_prompt_i18n":{"zh-CN":"用「数据可视化报告」模板把我的内容做成一份「把 CSV/Excel/JSON 数据转成漂亮的可视化报告页」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"}} |
【模板: 数据可视化报告】
<canvas> 外层包一个 <div style="position:relative;height:NNNpx"> (KPI 迷你图 ~40px, 主图表 ~240–280px)。Chart.js 用 responsive:true, maintainAspectRatio:false 时若父容器没有显式高度, 会陷入 ResizeObserver 死循环, 图表无限增高直至卡死浏览器。绝对不要直接给 canvas 写 height= 属性当布局, 那个只是初始值。<table> + 现代化样式 (zebra stripe, hover, sticky header)。