展开本页目录
开始前准备什么
- 下载本页原创练习素材，或准备自己的有权使用素材。
- 核对本页对应软件或账号实际版本；Remotion 示例需要已有可运行项目。
- 保留原素材、实际参数和独立输出，不覆盖输入。
- 准备小型 CSV 和明确单位
- 把 CSV 转成经过检查的数据
- 建立固定帧率的合成
- 按帧进度计算柱高
- 检查起始、中间与终帧
- 先出静帧，再导出视频
包含独立输入、模板、原创图形与 HTML 教材、验收表和离线检查；不包含外部账号或付费模型结果。
本页具体任务输入或操作模板；按步骤替换为自己的实际材料。
保留实际结果证据，默认待验证，不用人工预期填充通过。
1. 准备小型 CSV 和明确单位
下载 metrics.csv，四项为 12、18、9、21，单位为件，数据是原创练习值而非业务实测。先固定零基线和最高值 25，避免轴起点改变造成误导。
2. 把 CSV 转成经过检查的数据
执行 node convert-csv.mjs，把 metrics.csv 读成 rows.json。脚本检查两列无引号练习 CSV 的标题、唯一分类、非空有限数字与本练习 0–25 范围；check.mjs 再把实际 CSV 与 rows.json 逐行核对。真实复杂 CSV 需使用合适解析器，别把此小样脚本当通用解析器。
3. 建立固定帧率的合成
在自己的 Remotion 项目注册 Chart 合成，建议练习宽高 1280×720、30fps、120 帧。下载的 Chart.tsx 是组件，不含完整依赖锁文件；先核对安装版本和使用许可。
metrics.csv
category,value
A,12
B,18
C,9
D,214. 按帧进度计算柱高
Chart.tsx 实际 import rows from "./rows.json"，把这两个文件一起放进项目，再读取 useCurrentFrame 以 Math.min(1, frame/90) 算进度。终值标签来自 rows.json，柱高按原值与共同最高值25计算；更改CSV后先重新运行转换与检查。
5. 检查起始、中间与终帧
查看第 0、45、90 帧，柱高应该按相同比例变化，第 90 帧与 CSV 一致。本站截图是相同数学数据的原创 HTML 教材渲染，不冒充 Remotion 已导出的视频。
6. 先出静帧，再导出视频
在项目中先渲染第 90 帧，再导出实际 MP4。把 CSV、组件、合成配置和实际输出关联保存；需要 AI 帮忙写代码时让它只改样式，数值与单位保持可验证。
7. 下载材料并关联实际结果
先运行素材包内的 node check.mjs 检查输入结构，再完成需要账号或编辑器的步骤。离线通过不表示模型生成、外部软件导出或自然流量已经验证。
怎样确认已经完成
- 每根柱子的终值与 CSV 一致，单位与零基线可见。
- 0、45、90 帧共同刻度与进度正确。
- 实际输出和源数据分开保存。
常见问题
生成好看的柱图就等于数据准确吗？
不等于。核对源数据、单位、轴刻度和终帧数值，不能从外观判断。
下载组件可以直接替代完整项目吗？
不能。把组件注册到自己可运行的 Remotion 项目，安装版本一致的依赖，实际渲染后再验收。