← 中文资源

简体中文版本

构建输出 SVG 的图表生成 CLI

把 CSV 数据变成可发布的 SVG 图表:柱状、折线与迷你趋势线,主题化配色且输出字节级确定。

阅读英文原文

目标

构建读取 CSV 并渲染柱状图、折线图、sparkline 为独立 SVG 的 CLI:自动缩放、坐标轴刻度、主题配色,且相同输入加相同参数产出字节一致的输出以便代码评审 diff。

要点

无 DOM 无 canvas,SVG 以纯文本从缩放数值生成,唯一格式化器控制输出中每个数字——确定性由构造保证;单一线性比例尺模块被三种图共享,nice tick 算法在 1/2/5/10 里选步长;golden 测试逐字节比对提交的 SVG,任何时间戳、随机 id 或本地化数字都会立即失败。

提示

所有颜色、描边、字号来自主题 JSON,深浅两套内置,品牌主题是数据文件不是代码分叉。

验证

改变渲染器必须用文档化命令再生成 golden;测试失败信息会提示该命令。 项目目录骨架:

chart-cli/
├── bin/chart.js
├── src/
│   ├── csv.js
│   ├── scale.js
│   ├── renderers/
│   │   ├── bar.js
│   │   ├── line.js
│   │   └── sparkline.js
│   └── theme.js
├── test/
│   ├── scale.test.js
│   └── golden.test.js
├── themes/dark.json
└── package.json

实施阶段:CSV to columns → Scales and ticks → Renderers → CLI and golden files。