AntV
AntV Infographic
文档
参考
示例
AI
企业版

AntV Infographic

新一代信息图可视化引擎

快速开始参考文档GitHub

声明式信息图渲染框架

AntV Infographic 通过声明式的方式描述信息图,让数据叙事更简单、更优雅、更高效。

Demo.js

import { Infographic } from '@antv/infographic'; const infographic = new Infographic({ container: "#container", height: 240, data: { title: '互联网技术演进史', desc: '从Web 1.0到AI时代的关键里程碑', items: [ { time: '1991', label: '万维网诞生', desc: 'Tim Berners-Lee发布首个网站,开启互联网时代', icon: 'icon:mdi/web', }, // ... ], }, themeConfig: { palette: 'antv' }, template: 'list-row-horizontal-icon-arrow', }); infographic.render();

内置丰富信息图模版,开箱即用。从 0 到 1 创建信息图,从未如此简单。

AI 轻松生成专业信息图

从文本到信息图,让 AI 理解你的内容,智能推荐最佳可视化方案。 通过大语言模型自动抽取关键信息,生成专业配置,一键渲染精美信息图。

AI 生成信息图流程:从用户文本输入,经过智能推荐、信息抽取、生成配置,最终渲染出专业信息图AI 生成信息图流程:从用户文本输入,经过智能推荐、信息抽取、生成配置,最终渲染出专业信息图

无需设计经验,AI 帮你完成从内容理解到可视化呈现的全流程。 让数据和信息以更直观、更专业的方式传达。

前往体验

多样主题效果

一键切换风格,满足不同场景需求

4:03 AM

深色风格

1 / 3

支持自定义主题配置,灵活扩展样式系统

查看主题配置文档

在线体验

在代码编辑器中尝试创建你的第一个信息图。通过简洁的配置语法, 快速实现数据可视化。支持实时预览,即改即见效果。

spec.json
infographic.antv.vision/

无需复杂的安装配置,在浏览器中即可开始创作。 丰富的示例模板助你快速上手,轻松打造专业级信息图作品。

查看更多示例

持续演进,拥抱未来

我们的目标是“让信息图成为 AI 时代的视觉语言基础设施”

特性

未来计划

信息图语法

基于信息图视觉特点设计信息图语法,覆盖布局、元素、主题等内容

JSX 定制开发

基于 JSX 作为设计资产开发语言,直观、可复用、开发灵活

风格化渲染

一套模版多种视觉效果,支持手绘、纹理、渐变等风格

可视化编辑

支持添加、删除数据项;添加图形、文本标注,所见即所得
了解更多动态
AntV Infographic 团队技术探索示意

欢迎使用
AntV Infographic

立即开始
AntV Infographic
Copyright © Ant Group Co.
文档
快速开始
核心概念
自定义设计
信息图理论
API 参考
JSX
API
设计资产
更多
更多示例
AI 在线体验
GitHub
参与贡献
友情链接
AntV
G2
G6
L7
import { Infographic } from '@antv/infographic';

const infographic = new Infographic({
container: "#container",
height: 240,
data: {
title: '互联网技术演进史',
desc: '从Web 1.0到AI时代的关键里程碑',
items: [
{
time: '1991',
label: '万维网诞生',
desc: 'Tim Berners-Lee发布首个网站,开启互联网时代',
icon: 'icon:mdi/web',
},
// ...
],
},
themeConfig: { palette: 'antv' },
template: 'list-row-horizontal-icon-arrow',
});

infographic.render();