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

入门指南

信息图是一种将复杂信息转化为可视化图形的表达方式,其核心价值是通过视觉语言替代文字,起到快速传达关键信息的作用。

在上一节你已经了解如何创建一个内置信息图,现在我们介绍一些信息图的基本概念以及 AntV Infographic 的使用方法。

下面为一个完整的信息图示例:

这段示例使用了以下特性:

  • 资源加载器:通过 registerResourceLoader 注册一个资源加载器,用于从 Iconify 图标库加载 SVG 图标。
  • 信息图实例:使用 Infographic 类创建一个信息图实例
  • 设计:通过 design 属性定义信息图的布局和组成部分,包括标题、结构和数据项类型及参数配置。
  • 主题:通过 theme 切换为暗色主题,并通过 themeConfig 自定义色板、字体和风格化效果。
  • 数据:通过 data 传入信息图数据,并提供标题和数据项,其中数据项包含标题(label)、描述(desc)、时间(time)和图标(icon)字段。

在这个例子中没有通过 template 指定模版,而是通过 design 进行自定义,可以把模版理解为内置的一套 design 配置,AntV Infographic 中许多可注册的内容都是类似的逻辑,例如色板、主题。

如果你想了解关于完整的配置项细节,请继续阅读下一节信息图语法。

关于资源及资源加载器的更多信息,请参考:核心概念-资源。 关于数据的更多信息,请参考:核心概念-数据。 关于主题的更多信息,请参考:核心概念-主题。 关于信息图设计的更多信息,请参考:核心概念-设计。

上一章快速开始
下一章信息图语法

AntV Infographic
Copyright © Ant Group Co.
文档
快速开始
核心概念
自定义设计
信息图理论
API 参考
JSX
API
设计资产
更多
更多示例
AI 在线体验
GitHub
参与贡献
友情链接
AntV
G2
G6
L7