AntV Infographic
Home
Learn
Reference
Gallery
Icon
Editor
AI
Enterprise
  • 快速开始
    • 入门指南
    • 信息图语法
  • 核心概念
    • 设计
    • 模版
    • 数据
    • 主题
    • 资源
  • 自定义设计
    • 自定义结构
    • 自定义数据项
    • 自定义模版
    • 自定义主题
    • 自定义色板
    • 自定义字体
    • 自定义资源加载器
    • 自定义图案
  • 信息图理论
    • 信息图分类
    • 核心理论
    • 信息图构成要素
    • 信息图设计
  • 参与贡献
文档
核心概念

模板

除了自由组合设计外,AntV Infographic 也支持直接复用设计好的信息图模板,快速用数据填充并生成信息图。

将一套设计配置注册为 模板(Template)后,便可复用。你可以直接使用内置模板,也可以注册自己的模板供后续调用。

广义上,模板是信息图语法的子集,但多数场景只需预置 design,将 theme、themeConfig 留给使用者调整。

使用 registerTemplate 注册后,即可在语法入口行调用模板。以下两种写法等价:

  1. 直接通过 design 配置结构与数据项:
SYNTAX
design structure list-row item simple
  1. 注册并引用模板:
JS
import {registerTemplate} from '@antv/infographic'; registerTemplate('simple-list', { design: { structure: 'list-row', item: 'simple', }, });

然后在语法中这样使用:

SYNTAX
infographic simple-list

AntV Infographic 内置了一些常用的模板,详情请见内置模板。

Previous设计
Next数据

AntV Infographic
Copyright © Ant Group Co.
Docs
Quick Start
Core Concepts
Custom Design
Infographic Theory
API Reference
JSX
API
Design Assets
More
More Examples
AI Generated Infographics
GitHub
Contribute
Friendly Links
AntV
G2
G6
L7
SYNTAX
design
structure list-row
item simple
JS
import {registerTemplate} from '@antv/infographic';

registerTemplate('simple-list', {
design: {
structure: 'list-row',
item: 'simple',
},
});
SYNTAX
infographic simple-list