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

自定义模板

如果你不了解模板的概念,可以查看核心概念-模板

通过 registerTemplate 注册自定义模板后,便可在信息图语法中使用。

JS
import {registerTemplate, Infographic} from '@antv/infographic'; // 注册自定义模板 registerTemplate('custom-template', { design: { structure: 'sequence-horizontal-zigzag', item: 'underline-text', }, }); const infographic = new Infographic({ // 其他配置项... }); infographic.render(` infographic custom-template `);

将设计抽象为模板,能让团队共享统一的布局与样式,并在后续项目中直接复用。

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
JS
import {registerTemplate, Infographic} from '@antv/infographic';

// 注册自定义模板
registerTemplate('custom-template', {
design: {
structure: 'sequence-horizontal-zigzag',
item: 'underline-text',
},
});

const infographic = new Infographic({
// 其他配置项...
});

infographic.render(`
infographic custom-template
`);