Data Formulator 图表模板图标设计规范全解从调色板到 SVG 结构的实战指南【免费下载链接】data-formulator Data Formulator is an interactive AI-powered data analysis system makes it easy to connect, explore and visualize data.项目地址: https://gitcode.com/GitHub_Trending/da/data-formulator本指南以开源仓库 Data Formulator 中的设计约定文档 src/assets/icon-design.md 为主体系统讲解图表模板图标chart template icon的配色、标记样式、文件格式、SVG 画布坐标与图层结构等一整套规范并结合仓库内真实 SVG 源码与前端消费代码 src/components/ChartTemplates.tsx 进行印证。读完本文你将掌握如何在src/assets/目录下按统一规范为 Data Formulator 新增、维护任意图表类型的 UI 图标并理解这套约定背后的可复用原则。一、这套规范管什么图标在项目中的定位Data Formulator 的界面中每个图表模板如散点图、柱状图、K 线图、雷达图在模板选择面板里都对应一枚小图标。为了保证几十种图标在视觉上高度统一项目在 src/assets/icon-design.md 中固化了三件事色彩全部采用柔和的粉彩muted / pastel色系与整体 UI 色调一致禁用高饱和原色标记样式填充、描边、线宽、端点形状等统一取值画布与结构统一使用0 0 256 256的 SVG viewBox坐标轴位置、数据区范围、图层顺序都有明确约定。前端侧src/components/ChartTemplates.tsx 以静态 import 方式引入全部图标资源import chartIconScatter from ../assets/chart-icon-scatter.svg;等并集中维护一张CHART_ICONS映射表把图表类型名如Scatter Plot、Line Chart、Candlestick Chart映射为对应的图标 React 元素当某个图表类型找不到映射时会回退到占位图标chartIconPlaceholder。因此图标文件既是纯视觉资源也直接参与模板面板的渲染逻辑命名与映射必须一一对应。二、调色板7 个颜色 Token 及其用途icon-design.md规定了如下 7 个颜色 Token全部为柔和的粉彩色避免高饱和原色刺眼TokenHex用途浅蓝 Light Blue#76c6ff主填充色——点、柱、面积系列 A深蓝 Dark Blue#4a8acb主描边 / 折线系列 A浅灰 Light Gray#B8B8B8次级填充色——点、柱、面积系列 B深灰 Dark Gray#7a7a7a次级描边 / 折线系列 B轴 / 轮廓 Axis / Outline#363636坐标轴、标记轮廓、茎线stems粉红 Pastel Red#e8868f看跌 / 负向K 线粉绿 Pastel Green#6dc48d看涨 / 正向K 线这套配色的设计意图很明确浅色填充 深色轮廓的做法让标记在任何尺寸下都边界清晰蓝色/灰色成对出现天然支持双序列编码见第四节而轴与轮廓统一使用#363636保证所有图标共享同一套骨架。源码印证打开 src/assets/chart-icon-candlestick.svg可以看到 4 根蜡烛中 2 根看跌使用#e8868f、2 根看涨使用#6dc48d完全吻合上表的语义约定。三、Mark 样式规则填充、线条与线宽3.1 填充型标记柱、圆、面积对于bar、circle、area这类填充标记规范要求填充使用浅色#76c6ff或#B8B8B8轮廓使用#363636stroke-width取值2–3这样能给标记一个干净、明确的边缘与设计师样稿保持一致。以 src/assets/chart-icon-scatter.svg 为例6 个散点全部为fill#76c6ff或#B8B8B8stroke#363636 stroke-width2circle cx78 cy170 r10 fill#76c6ff stroke#363636 stroke-width2/ circle cx140 cy155 r10 fill#B8B8B8 stroke#363636 stroke-width2/3.2 线条型标记折线图、bump 图描边使用深色蓝色系列用#4a8acb灰色系列用#7a7a7astroke-width取4–5并设置stroke-linecapround与stroke-linejoinround线条上的数据点填充对应的浅色轮廓#363636、stroke-width2。源码印证src/assets/chart-icon-line.svg 中的两条折线均使用stroke-width5且带有stroke-linecapround stroke-linejoinround。值得注意的一个实现细节是该文件的主序列折线实际使用了浅蓝#76c6ff作为描边文档建议深蓝#4a8acb次级折线使用浅灰#B8B8B8——从源码结构看具体图标在浅色描边保证更轻快的观感与深色描边保证对比度之间存在取舍设计新图标时建议以整体协调为准并在两套取值间保持项目内一致。3.3 线宽参考表元素stroke-width坐标轴 Axes4数据线折线 / bump / 面积轮廓4–5标记轮廓柱、点、矩形2–3茎线 / 参考线lollipop4网格 / 辐条radar0.6–0.8线宽分档的本质是层级轴最粗4是图标的边界骨架数据线次之4–5承担主要视觉信息标记轮廓最细2–3只负责勾勒形状边缘。源码中 src/assets/chart-icon-lollipop.svg 的 4 根茎线正是stroke#363636 stroke-width4 stroke-linecapround与表内Stems / rules: 4完全一致。雷达图的辐条实际实现src/assets/chart-icon-radar.svg为#b0b0b0、宽度1.5属于参考值区间内的工程化取值。四、多序列配色约定双序列与四序列规范明确展示颜色编码的图表一律使用两个序列系列 A浅蓝填充 / 深蓝描边#76c6ff/#4a8acb系列 B浅灰填充 / 深灰描边#B8B8B8/#7a7a7a。需要四个序列时典型如 bump 图按以下顺序交替系列填充描边系列 1#76c6ff#4a8acb系列 2#B8B8B8#7a7a7a系列 3#5ba8e0#3d7ebf系列 4#d0d0d0#a8a8a8四序列配色通过蓝色系加深、灰色系变浅的同色相变化扩展出两档层次视觉上依然统一。源码印证src/assets/chart-icon-bump.svg 绘制了 4 条随时间点交错排名rank 1→2→3→4的折线其描边依次为#4a8acb、#7a7a7a、#3d7ebf、#a8a8a84 组数据点填充依次为#76c6ff、#B8B8B8、#5ba8e0、#d0d0d0与上表逐行对应且所有点均带#363636宽度2的轮廓。五、文件格式与命名约定新增图标一律使用 SVG文件名为chart-icon-*.svgviewBox0 0 256 256SVG 在任意尺寸下缩放清晰是首选格式遗留图标早期存在压缩后的 PNGchart-icon-*-min.png版本命名规律chart-icon-前缀 图表英文名如chart-icon-scatter.svg、chart-icon-area.svg、chart-icon-candlestick.svg。从当前仓库文件列表看绝大多数图标已完成 SVG 化迁移仅地图类 src/assets/chart-icon-us-map-min.png 与 src/assets/chart-icon-world-map-min.png 仍以-min.png形式存在第六节图标清单中原文档列出的-min.png名称多为迁移前的记录对应 SVG 文件已在src/assets/中就位。六、SVG 结构约定画布、坐标系与图层顺序所有图标共享同一套 SVG 骨架icon-design.md明确给出了轴坐标与数据区域范围图层顺序坐标轴最后绘制使其叠放在所有数据标记之上Y 轴x148 y128 x248 y2220stroke#363636、宽度4、stroke-linecaproundX 轴x144 y1216 x2240 y2216stroke#363636、宽度4、stroke-linecapround数据区域大致为x ∈ [60, 236]、y ∈ [40, 216]。源码印证src/assets/chart-icon-scatter.svg 的轴与规范逐字符一致——line x148 y128 x248 y2220 stroke#363636 stroke-width4 stroke-linecapround/与line x144 y1216 x2240 y2216 .../且都排在所有circle之后。折线图、面积图、lollipop、瀑布图、K 线图等 SVG 文件均遵循同样的先画标记、后画轴顺序从而保证在不同图标间切换时视觉重心一致。实际文件还补充了一些规范之外的实用细节面积图src/assets/chart-icon-area.svg先画底部的灰色面积、再画顶部的蓝色面积路径最后用Z闭合到 X 轴瀑布图src/assets/chart-icon-waterfall.svg蓝色总计柱与灰色增量浮动柱之间用stroke#999 stroke-width1.5 stroke-dasharray4,3的虚线连接线表示数值承接关系K 线图影线用#363636宽度3的竖线、实体用rx2圆角矩形表达涨跌柱体金字塔图src/assets/chart-icon-pyramid.svg4 行左灰右蓝的矩形自顶向下逐行变宽中间以竖线分界仅保留 X 轴y216省略 Y 轴流图src/assets/chart-icon-streamgraph.svg3 条波形带状区域灰→蓝→灰用二次贝塞尔Q曲线拼接取消直角坐标系突出流的语义。七、图标清单Icon Inventoryicon-design.md完整收录了项目图标的存量清单下表按原文档整理其中标注 PNG 的条目在当前仓库中大多已有同名 SVG 版本文件图表类型格式chart-icon-scatter-min.png散点图 Scatter PlotPNGchart-icon-linear-regression-min.png线性回归 Linear RegressionPNGchart-icon-dot-plot-horizontal-min.png水平范围点图 Ranged Dot PlotPNGchart-icon-box-plot-min.png箱线图 BoxplotPNGchart-icon-bubble-min.png气泡图 Bubble ChartPNGchart-icon-column-min.png柱状图 Bar ChartPNGchart-icon-column-grouped-min.png分组柱状图 Grouped Bar ChartPNGchart-icon-column-stacked-min.png堆叠柱状图 Stacked Bar ChartPNGchart-icon-histogram-min.png直方图 HistogramPNGchart-icon-heat-map-min.png热力图 HeatmapPNGchart-icon-pyramid.svg金字塔图 Pyramid ChartSVGchart-icon-line-min.png折线图 Line ChartPNGchart-icon-dotted-line-min.png虚线折线图 Dotted Line ChartPNGchart-icon-area.svg面积图 Area ChartSVGchart-icon-streamgraph.svg流图 StreamgraphSVGchart-icon-lollipop.svg棒棒糖图 Lollipop ChartSVGchart-icon-density.svg密度图 Density PlotSVGchart-icon-candlestick.svgK 线图 Candlestick ChartSVGchart-icon-waterfall.svg瀑布图 Waterfall ChartSVGchart-icon-strip-plot.svg条带图 Strip PlotSVGchart-icon-radar.svg雷达图 Radar ChartSVGchart-icon-bump.svgBump 图 Bump ChartSVGchart-icon-pie-min.png饼图 Pie ChartPNGchart-icon-us-map-min.png美国地图 US MapPNGchart-icon-world-map-min.png世界地图 World MapPNGchart-icon-custom-point-min.png自定义点 Custom PointPNGchart-icon-custom-line-min.png自定义线 Custom LinePNGchart-icon-custom-bar-min.png自定义柱 Custom BarPNGchart-icon-custom-rect-min.png自定义矩形 Custom RectPNGchart-icon-custom-area-min.png自定义面积 Custom AreaPNGchart-icon-dot-plot-vertical-min.png未使用——原为 LollipopPNGchart-icon-table-min.png表格 TablePNG两个值得注意的点一是chart-icon-dot-plot-vertical-min.png被明确标注为未使用其职责已被chart-icon-lollipop.svg承接新项目清理图标时可直接忽略它二是当前仓库的src/assets/中还扩展了清单之外的大量新图表 SVG如chart-icon-connected-scatter.svg、chart-icon-gantt.svg、chart-icon-kpi-card.svg、chart-icon-range-area.svg、chart-icon-slope.svg、chart-icon-sparkline.svg、chart-icon-violin.svg、chart-icon-bullet.svg、chart-icon-ecdf.svg、chart-icon-rose.svg、chart-icon-bar-table.svg等说明这套规范正在持续被新图表模板遵循与补充。八、如何为新增图表类型添加图标实操路径结合规范文档与前端消费代码为 Data Formulator 新增一种图表的 UI 图标只需三步制作 SVG 图标在src/assets/下新建chart-icon-图表名.svg遵守viewBox0 0 256 256、调色板 Token、线宽分档、先标记后轴图层顺序等全部约定静态导入在 src/components/ChartTemplates.tsx 顶部按既有模式加入import chartIconXxx from ../assets/chart-icon-xxx.svg;——该文件注释明确说明Import all chart icons statically so they are included in the build全部静态导入以保证被打包进构建产物注册映射在CHART_ICONS映射表中添加一行如Line Chart: ChartIcon src{chartIconLine} /使图表类型名与新图标关联若某图表类型未注册UI 会回退到chartIconPlaceholder占位图标。编写 SVG 时建议直接对照本节第六部分的散点图骨架起稿先复制 Y 轴48,28 → 48,220与 X 轴44,216 → 240,216两条基准线再把数据图形约束在x ∈ [60, 236]、y ∈ [40, 216]的矩形区域内最后把轴移动到文件末尾渲染。这样产出的图标在模板面板中会与既有图标保持一致的构图重心与视觉节奏。九、小结Data Formulator 的图表图标设计规范以一份极简文档 src/assets/icon-design.md 承载了完整的视觉一致性约束7 个粉彩颜色 Token、统一的填充/描边/线宽规则、双序列与四序列配色方案、256×256的 SVG 画布与固定轴坐标以及覆盖三十余种图表类型的图标清单。与 src/components/ChartTemplates.tsx 中的静态导入与CHART_ICONS映射配合任何新增图表都能在几分钟内获得一枚风格统一、可随容器任意缩放的界面图标。对于想深入源码验证的读者推荐依次浏览 src/assets/chart-icon-scatter.svg、src/assets/chart-icon-bump.svg、src/assets/chart-icon-candlestick.svg 三份代表性文件即可直观感受这套规范从文字到代码的完整落地。【免费下载链接】data-formulator Data Formulator is an interactive AI-powered data analysis system makes it easy to connect, explore and visualize data.项目地址: https://gitcode.com/GitHub_Trending/da/data-formulator创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Data Formulator 图表模板图标设计规范全解：从调色板到 SVG 结构的实战指南
Data Formulator 图表模板图标设计规范全解从调色板到 SVG 结构的实战指南【免费下载链接】data-formulator Data Formulator is an interactive AI-powered data analysis system makes it easy to connect, explore and visualize data.项目地址: https://gitcode.com/GitHub_Trending/da/data-formulator本指南以开源仓库 Data Formulator 中的设计约定文档 src/assets/icon-design.md 为主体系统讲解图表模板图标chart template icon的配色、标记样式、文件格式、SVG 画布坐标与图层结构等一整套规范并结合仓库内真实 SVG 源码与前端消费代码 src/components/ChartTemplates.tsx 进行印证。读完本文你将掌握如何在src/assets/目录下按统一规范为 Data Formulator 新增、维护任意图表类型的 UI 图标并理解这套约定背后的可复用原则。一、这套规范管什么图标在项目中的定位Data Formulator 的界面中每个图表模板如散点图、柱状图、K 线图、雷达图在模板选择面板里都对应一枚小图标。为了保证几十种图标在视觉上高度统一项目在 src/assets/icon-design.md 中固化了三件事色彩全部采用柔和的粉彩muted / pastel色系与整体 UI 色调一致禁用高饱和原色标记样式填充、描边、线宽、端点形状等统一取值画布与结构统一使用0 0 256 256的 SVG viewBox坐标轴位置、数据区范围、图层顺序都有明确约定。前端侧src/components/ChartTemplates.tsx 以静态 import 方式引入全部图标资源import chartIconScatter from ../assets/chart-icon-scatter.svg;等并集中维护一张CHART_ICONS映射表把图表类型名如Scatter Plot、Line Chart、Candlestick Chart映射为对应的图标 React 元素当某个图表类型找不到映射时会回退到占位图标chartIconPlaceholder。因此图标文件既是纯视觉资源也直接参与模板面板的渲染逻辑命名与映射必须一一对应。二、调色板7 个颜色 Token 及其用途icon-design.md规定了如下 7 个颜色 Token全部为柔和的粉彩色避免高饱和原色刺眼TokenHex用途浅蓝 Light Blue#76c6ff主填充色——点、柱、面积系列 A深蓝 Dark Blue#4a8acb主描边 / 折线系列 A浅灰 Light Gray#B8B8B8次级填充色——点、柱、面积系列 B深灰 Dark Gray#7a7a7a次级描边 / 折线系列 B轴 / 轮廓 Axis / Outline#363636坐标轴、标记轮廓、茎线stems粉红 Pastel Red#e8868f看跌 / 负向K 线粉绿 Pastel Green#6dc48d看涨 / 正向K 线这套配色的设计意图很明确浅色填充 深色轮廓的做法让标记在任何尺寸下都边界清晰蓝色/灰色成对出现天然支持双序列编码见第四节而轴与轮廓统一使用#363636保证所有图标共享同一套骨架。源码印证打开 src/assets/chart-icon-candlestick.svg可以看到 4 根蜡烛中 2 根看跌使用#e8868f、2 根看涨使用#6dc48d完全吻合上表的语义约定。三、Mark 样式规则填充、线条与线宽3.1 填充型标记柱、圆、面积对于bar、circle、area这类填充标记规范要求填充使用浅色#76c6ff或#B8B8B8轮廓使用#363636stroke-width取值2–3这样能给标记一个干净、明确的边缘与设计师样稿保持一致。以 src/assets/chart-icon-scatter.svg 为例6 个散点全部为fill#76c6ff或#B8B8B8stroke#363636 stroke-width2circle cx78 cy170 r10 fill#76c6ff stroke#363636 stroke-width2/ circle cx140 cy155 r10 fill#B8B8B8 stroke#363636 stroke-width2/3.2 线条型标记折线图、bump 图描边使用深色蓝色系列用#4a8acb灰色系列用#7a7a7astroke-width取4–5并设置stroke-linecapround与stroke-linejoinround线条上的数据点填充对应的浅色轮廓#363636、stroke-width2。源码印证src/assets/chart-icon-line.svg 中的两条折线均使用stroke-width5且带有stroke-linecapround stroke-linejoinround。值得注意的一个实现细节是该文件的主序列折线实际使用了浅蓝#76c6ff作为描边文档建议深蓝#4a8acb次级折线使用浅灰#B8B8B8——从源码结构看具体图标在浅色描边保证更轻快的观感与深色描边保证对比度之间存在取舍设计新图标时建议以整体协调为准并在两套取值间保持项目内一致。3.3 线宽参考表元素stroke-width坐标轴 Axes4数据线折线 / bump / 面积轮廓4–5标记轮廓柱、点、矩形2–3茎线 / 参考线lollipop4网格 / 辐条radar0.6–0.8线宽分档的本质是层级轴最粗4是图标的边界骨架数据线次之4–5承担主要视觉信息标记轮廓最细2–3只负责勾勒形状边缘。源码中 src/assets/chart-icon-lollipop.svg 的 4 根茎线正是stroke#363636 stroke-width4 stroke-linecapround与表内Stems / rules: 4完全一致。雷达图的辐条实际实现src/assets/chart-icon-radar.svg为#b0b0b0、宽度1.5属于参考值区间内的工程化取值。四、多序列配色约定双序列与四序列规范明确展示颜色编码的图表一律使用两个序列系列 A浅蓝填充 / 深蓝描边#76c6ff/#4a8acb系列 B浅灰填充 / 深灰描边#B8B8B8/#7a7a7a。需要四个序列时典型如 bump 图按以下顺序交替系列填充描边系列 1#76c6ff#4a8acb系列 2#B8B8B8#7a7a7a系列 3#5ba8e0#3d7ebf系列 4#d0d0d0#a8a8a8四序列配色通过蓝色系加深、灰色系变浅的同色相变化扩展出两档层次视觉上依然统一。源码印证src/assets/chart-icon-bump.svg 绘制了 4 条随时间点交错排名rank 1→2→3→4的折线其描边依次为#4a8acb、#7a7a7a、#3d7ebf、#a8a8a84 组数据点填充依次为#76c6ff、#B8B8B8、#5ba8e0、#d0d0d0与上表逐行对应且所有点均带#363636宽度2的轮廓。五、文件格式与命名约定新增图标一律使用 SVG文件名为chart-icon-*.svgviewBox0 0 256 256SVG 在任意尺寸下缩放清晰是首选格式遗留图标早期存在压缩后的 PNGchart-icon-*-min.png版本命名规律chart-icon-前缀 图表英文名如chart-icon-scatter.svg、chart-icon-area.svg、chart-icon-candlestick.svg。从当前仓库文件列表看绝大多数图标已完成 SVG 化迁移仅地图类 src/assets/chart-icon-us-map-min.png 与 src/assets/chart-icon-world-map-min.png 仍以-min.png形式存在第六节图标清单中原文档列出的-min.png名称多为迁移前的记录对应 SVG 文件已在src/assets/中就位。六、SVG 结构约定画布、坐标系与图层顺序所有图标共享同一套 SVG 骨架icon-design.md明确给出了轴坐标与数据区域范围图层顺序坐标轴最后绘制使其叠放在所有数据标记之上Y 轴x148 y128 x248 y2220stroke#363636、宽度4、stroke-linecaproundX 轴x144 y1216 x2240 y2216stroke#363636、宽度4、stroke-linecapround数据区域大致为x ∈ [60, 236]、y ∈ [40, 216]。源码印证src/assets/chart-icon-scatter.svg 的轴与规范逐字符一致——line x148 y128 x248 y2220 stroke#363636 stroke-width4 stroke-linecapround/与line x144 y1216 x2240 y2216 .../且都排在所有circle之后。折线图、面积图、lollipop、瀑布图、K 线图等 SVG 文件均遵循同样的先画标记、后画轴顺序从而保证在不同图标间切换时视觉重心一致。实际文件还补充了一些规范之外的实用细节面积图src/assets/chart-icon-area.svg先画底部的灰色面积、再画顶部的蓝色面积路径最后用Z闭合到 X 轴瀑布图src/assets/chart-icon-waterfall.svg蓝色总计柱与灰色增量浮动柱之间用stroke#999 stroke-width1.5 stroke-dasharray4,3的虚线连接线表示数值承接关系K 线图影线用#363636宽度3的竖线、实体用rx2圆角矩形表达涨跌柱体金字塔图src/assets/chart-icon-pyramid.svg4 行左灰右蓝的矩形自顶向下逐行变宽中间以竖线分界仅保留 X 轴y216省略 Y 轴流图src/assets/chart-icon-streamgraph.svg3 条波形带状区域灰→蓝→灰用二次贝塞尔Q曲线拼接取消直角坐标系突出流的语义。七、图标清单Icon Inventoryicon-design.md完整收录了项目图标的存量清单下表按原文档整理其中标注 PNG 的条目在当前仓库中大多已有同名 SVG 版本文件图表类型格式chart-icon-scatter-min.png散点图 Scatter PlotPNGchart-icon-linear-regression-min.png线性回归 Linear RegressionPNGchart-icon-dot-plot-horizontal-min.png水平范围点图 Ranged Dot PlotPNGchart-icon-box-plot-min.png箱线图 BoxplotPNGchart-icon-bubble-min.png气泡图 Bubble ChartPNGchart-icon-column-min.png柱状图 Bar ChartPNGchart-icon-column-grouped-min.png分组柱状图 Grouped Bar ChartPNGchart-icon-column-stacked-min.png堆叠柱状图 Stacked Bar ChartPNGchart-icon-histogram-min.png直方图 HistogramPNGchart-icon-heat-map-min.png热力图 HeatmapPNGchart-icon-pyramid.svg金字塔图 Pyramid ChartSVGchart-icon-line-min.png折线图 Line ChartPNGchart-icon-dotted-line-min.png虚线折线图 Dotted Line ChartPNGchart-icon-area.svg面积图 Area ChartSVGchart-icon-streamgraph.svg流图 StreamgraphSVGchart-icon-lollipop.svg棒棒糖图 Lollipop ChartSVGchart-icon-density.svg密度图 Density PlotSVGchart-icon-candlestick.svgK 线图 Candlestick ChartSVGchart-icon-waterfall.svg瀑布图 Waterfall ChartSVGchart-icon-strip-plot.svg条带图 Strip PlotSVGchart-icon-radar.svg雷达图 Radar ChartSVGchart-icon-bump.svgBump 图 Bump ChartSVGchart-icon-pie-min.png饼图 Pie ChartPNGchart-icon-us-map-min.png美国地图 US MapPNGchart-icon-world-map-min.png世界地图 World MapPNGchart-icon-custom-point-min.png自定义点 Custom PointPNGchart-icon-custom-line-min.png自定义线 Custom LinePNGchart-icon-custom-bar-min.png自定义柱 Custom BarPNGchart-icon-custom-rect-min.png自定义矩形 Custom RectPNGchart-icon-custom-area-min.png自定义面积 Custom AreaPNGchart-icon-dot-plot-vertical-min.png未使用——原为 LollipopPNGchart-icon-table-min.png表格 TablePNG两个值得注意的点一是chart-icon-dot-plot-vertical-min.png被明确标注为未使用其职责已被chart-icon-lollipop.svg承接新项目清理图标时可直接忽略它二是当前仓库的src/assets/中还扩展了清单之外的大量新图表 SVG如chart-icon-connected-scatter.svg、chart-icon-gantt.svg、chart-icon-kpi-card.svg、chart-icon-range-area.svg、chart-icon-slope.svg、chart-icon-sparkline.svg、chart-icon-violin.svg、chart-icon-bullet.svg、chart-icon-ecdf.svg、chart-icon-rose.svg、chart-icon-bar-table.svg等说明这套规范正在持续被新图表模板遵循与补充。八、如何为新增图表类型添加图标实操路径结合规范文档与前端消费代码为 Data Formulator 新增一种图表的 UI 图标只需三步制作 SVG 图标在src/assets/下新建chart-icon-图表名.svg遵守viewBox0 0 256 256、调色板 Token、线宽分档、先标记后轴图层顺序等全部约定静态导入在 src/components/ChartTemplates.tsx 顶部按既有模式加入import chartIconXxx from ../assets/chart-icon-xxx.svg;——该文件注释明确说明Import all chart icons statically so they are included in the build全部静态导入以保证被打包进构建产物注册映射在CHART_ICONS映射表中添加一行如Line Chart: ChartIcon src{chartIconLine} /使图表类型名与新图标关联若某图表类型未注册UI 会回退到chartIconPlaceholder占位图标。编写 SVG 时建议直接对照本节第六部分的散点图骨架起稿先复制 Y 轴48,28 → 48,220与 X 轴44,216 → 240,216两条基准线再把数据图形约束在x ∈ [60, 236]、y ∈ [40, 216]的矩形区域内最后把轴移动到文件末尾渲染。这样产出的图标在模板面板中会与既有图标保持一致的构图重心与视觉节奏。九、小结Data Formulator 的图表图标设计规范以一份极简文档 src/assets/icon-design.md 承载了完整的视觉一致性约束7 个粉彩颜色 Token、统一的填充/描边/线宽规则、双序列与四序列配色方案、256×256的 SVG 画布与固定轴坐标以及覆盖三十余种图表类型的图标清单。与 src/components/ChartTemplates.tsx 中的静态导入与CHART_ICONS映射配合任何新增图表都能在几分钟内获得一枚风格统一、可随容器任意缩放的界面图标。对于想深入源码验证的读者推荐依次浏览 src/assets/chart-icon-scatter.svg、src/assets/chart-icon-bump.svg、src/assets/chart-icon-candlestick.svg 三份代表性文件即可直观感受这套规范从文字到代码的完整落地。【免费下载链接】data-formulator Data Formulator is an interactive AI-powered data analysis system makes it easy to connect, explore and visualize data.项目地址: https://gitcode.com/GitHub_Trending/da/data-formulator创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考