AntV
AntV Infographic
文档
参考
示例
AI
企业版
  • 快速开始
    • 入门指南
    • 信息图语法
  • 核心概念
    • 设计
    • 模版
    • 数据
    • 主题
    • 资源
  • 自定义设计
    • 自定义结构
    • 自定义数据项
    • 自定义模版
    • 自定义主题
    • 自定义色板
    • 自定义字体
    • 自定义资源加载器
    • 自定义图案
  • 信息图理论
    • 信息图分类
    • 核心理论
    • 信息图构成要素
    • 信息图设计
  • 参与贡献
    • 项目介绍
    • 开源计划
    • 贡献指南
    • 代码规范
    • 提交 PR
文档
核心概念

模版

AntV Infographic 允许用户通过信息图语法灵活的组合出丰富多样的信息图,但对于一些用户来说,他们的目标并非自行进行设计,而是将已经设计好的信息图模版填充进准备好的数据中,从而快速生成信息图。

因此 AntV Infographic 支持将组合好的设计配置项进行注册便于复用,称为模版(Template)。用户可以通过内置的模版快速生成常见的信息图设计,也可以将自己设计好的信息图模版进行注册,便于后续使用。

广义上来说模版可以是信息图语法的子集,因此它可以相当灵活。不过在大多数实践中,我们通常只会配置 options.design 部分,而将 theme、themeConfig 等留给用户自行发挥。

模版可以通过 registerTemplate 方法进行注册,注册后即可通过 template 字段进行调用,以下两种写法是等价的:

  1. 通过 design 直接配置设计项:

new Infographic({ // 其他配置项... design: { structure: 'list-row', item: 'simple', }, });

  1. 注册并使用模版:

import {registerTemplate, Infographic} from '@antv/infographic'; registerTemplate('simple-list', { design: { structure: 'list-row', item: 'simple', }, }); new Infographic({ // 其他配置项... template: 'simple-list', });

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

上一章设计
下一章数据

AntV Infographic
Copyright © Ant Group Co.
文档
快速开始
核心概念
自定义设计
信息图理论
API 参考
JSX
API
设计资产
更多
更多示例
AI 在线体验
GitHub
参与贡献
友情链接
AntV
G2
G6
L7
new Infographic({
// 其他配置项...
design: {
structure: 'list-row',
item: 'simple',
},
});
import {registerTemplate, Infographic} from '@antv/infographic';

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

new Infographic({
// 其他配置项...
template: 'simple-list',
});