Infographic

环境要求

• Node.js 环境（用于 npm 安装依赖）
• 可用的 npm 包管理器
• 一个能挂载 DOM 容器的 Web 页面（浏览器环境）
• 支持 TypeScript / ESM 的构建或运行环境

安装与启动步骤

1. 1安装依赖包

   在项目根目录执行 npm 安装命令，把 Infographic 作为依赖装进工程。

   npm install @antv/infographic

   复制

2. 2准备渲染容器

   在页面中放置一个带 id 的 DOM 容器（示例为 #container），宽高交给框架控制。

   <div id="container"></div>

   复制

3. 3初始化并渲染

   引入 Infographic 类，传入容器与宽高、editable 选项，再用 render 传入信息图语法文本。

   import { Infographic } from '@antv/infographic';
   
   const infographic = new Infographic({
     container: '#container',
     width: '100%',
     height: '100%',
     editable: true,
   });
   
   infographic.render(`
   infographic list-row-simple-horizontal-arrow
   data
     lists
       - label Step 1
         desc Start
       - label Step 2
         desc In Progress
       - label Step 3
         desc Complete
   `);

   复制

关键配置

如何确认成功

页面 #container 容器内出现渲染好的信息图（示例为三步横向箭头列表），即表示成功。

常见问题

注意事项

• 该库是渲染引擎，需在浏览器等有 DOM 的环境中使用。
• 内置约 200 个信息图模板、数据项组件与布局，可直接复用。
• 配置与语法面向 AI 生成优化，支持 AI 流式输出与渲染。
• 主题系统提供手绘、渐变、图案等预设，也可深度自定义。