AntV Infographic 五分钟 AI 出信息图

AntV Infographic 五分钟 AI 出信息图【免费下载链接】Infographic An Infographic Generation and Rendering Framework, bring words to life with AI!项目地址: https://gitcode.com/gh_mirrors/info/InfographicAntV Infographic 把 AI 生成的文字直接渲染成可编辑的信息图省掉你画图这一步。你让大模型吐了一整段季度复盘然后呢总不能让它自己动笔吧。接上它之后文字流出来的同时图就在旁边长出来。它到底在解决什么问题想象你让 AI 总结完季度目标回了一大段文字做汇报 PPT 时你还是得自己画流程图。AntV Infographic 补的就是这一环用一套缩进写成的信息图语法描述内容render 一下直接出 SVG。这段语法像菜谱只写食材和摆盘不写开火炒菜的执行过程执行交给渲染引擎。所以 AI 每生成一行图就能跟着长一点。五分钟让信息图渲染跑起来先装包一个 npm 依赖就够不用配构建工具。npm install antv/infographic这一步建实例并渲染第一张图语法只有首行模板名加 data 数据两块。import { Infographic } from antv/infographic; const infographic new Infographic({ container: #box, width: 100%, height: 100% }); infographic.render(infographic chart-column-simple\ndata\ntitle 季度收入\nvalues\n- label Q1\n value 320\n- label Q2\n value 410);跑通之后你会看到两根柱子Q1 320、Q2 410高度就是刚写的那两个数值页面上放一个 id 为box的 div 作为容器就行。换个姿势用它如果你只是想换个风格数据不动只换配色和手绘笔触。infographic.render(infographic chart-column-simple\ndata\ntitle 季度收入\n values\n- label Q1\n value 320\n- label Q2\n value 410\n theme\n palette #61DDAA #F6BD16 #F08BB4\n stylize rough);重新 render 一次柱子的颜色变成新色板、笔触变手绘数据一个字没改。你更可能遇到 AI 边生成边预览流式输出时图跟着文字一起长。let buffer ; for (const chunk of chunks) { buffer chunk; infographic.render(buffer); }语法对没写完的行很宽容已完成的片段先画出来不用等 AI 全部说完才看到图。踩过的坑 进阶AI 编了一个不存在的模板名渲染直接白屏—— 模型偶尔会从想象里拼模板名注册表里查不到。渲染前拿首行和src/templates/built-in.ts里的真实模板名对一下。icon 写成rocket-launch图标不出来—— 语义图标必须用空格分隔连字符会被当成一个整体去查。改成rocket launch就行。字体加载完之前渲染文字换行和宽度是错的—— 第一遍用的是后备字体量出来的尺寸。等字体就绪再 render 一次document.fonts.ready.then(() infographic.render(syntax))。如果你只是日常用知道这几个就够剩下的等真遇到了再翻文档不迟。够用之后入门指南 —— 完整配置示例适合刚跑通的信息图语法 —— 改字段和布局时查这个信息图 API —— 想接自己业务数据的技能插件规则 —— AI 读这份才知道选哪个模板第一版图出来之后把你手头那份周报数据丢进去试试让它替你画个初稿再改。【免费下载链接】Infographic An Infographic Generation and Rendering Framework, bring words to life with AI!项目地址: https://gitcode.com/gh_mirrors/info/Infographic创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考