AntV Infographic
Home
Learn
Reference
Gallery
Icon
Editor
AI
Enterprise

目录

  • Overview
  • 配置主题
  • 注册主题
  • 快速开始
    • 入门指南
    • 信息图语法
  • 核心概念
    • 设计
    • 模版
    • 数据
    • 主题
    • 资源
  • 自定义设计
    • 自定义结构
    • 自定义数据项
    • 自定义模版
    • 自定义主题
    • 自定义色板
    • 自定义字体
    • 自定义资源加载器
    • 自定义图案
  • 信息图理论
    • 信息图分类
    • 核心理论
    • 信息图构成要素
    • 信息图设计
  • 参与贡献
文档
自定义设计

自定义主题

主题用于配置信息图的全局样式与风格。如需概念回顾,请先阅读核心概念-主题。

配置主题

对于简单的主题配置,可以直接在创建信息图时传入配置项:

JS
const infographic = new Infographic({ // 其他配置项... }); infographic.render(` theme colorPrimary #FF356A colorBg #FFFFFF # 其他主题配置项... `);

完整配置项参考核心概念-主题。

注册主题

对于一些比较通用的主题,可以注册之后便于复用,通过 registerTheme 来注册主题:

JS
import {registerTheme} from '@antv/infographic'; registerTheme('my-theme', { // 主题配置项 });

注册后即可在语法中通过 theme my-theme 引用,配合 theme 进一步调整:

SYNTAX
infographic list-row-simple-horizontal-arrow theme my-theme colorPrimary #FF356A # 其他覆盖配置项...
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
const infographic = new Infographic({
// 其他配置项...
});

infographic.render(`
theme
colorPrimary #FF356A
colorBg #FFFFFF
# 其他主题配置项...
`);
JS
import {registerTheme} from '@antv/infographic';

registerTheme('my-theme', {
// 主题配置项
});
SYNTAX
infographic list-row-simple-horizontal-arrow
theme my-theme
colorPrimary #FF356A
# 其他覆盖配置项...