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

入门指南

信息图通过视觉语言压缩文字信息,让读者用最短时间抓住重点。本节在快速上手的基础上,补充完整的配置示例与要点说明。

下面是一个包含自定义设计、主题和资源加载的完整示例:

代码说明:

  • 资源加载器:通过 registerResourceLoader 从 Iconify 按需拉取 SVG。
  • 编辑器:设置 editable: true 启用交互式编辑功能。
  • 设计:design 字段自定义标题、结构与数据项类型及参数。
  • 主题:切换暗色主题并用 themeConfig 配置色板、字体、风格化。
  • 数据:传入标题与数据项(标签、描述、时间、图标)。

这里没有使用 template 字段,而是直接给出设计配置。可以把模板理解为一组预置的 design 与主题组合,便于快捷调用。

更多细节可继续阅读:

  • 信息图语法
  • 核心概念-资源
  • 核心概念-数据
  • 核心概念-主题
  • 核心概念-设计
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