AntV Infographic
Home
Learn
Reference
Examples
Icon
AI
Enterprise

目录

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

数据

AntV Infographic 的数据配置既简单又灵活,内置支持一维数据与层级数据,并预留扩展空间;后续会补充对关系数据等复杂结构的支持。

数据类型定义:

TS
export interface Data { title?: string; desc?: string; items: ItemDatum[]; [key: string]: any; } export interface ItemDatum { icon?: string | ResourceConfig; label?: string; desc?: string; value?: number; illus?: string | ResourceConfig; children?: ItemDatum[]; [key: string]: any; }

Data 包含标题、描述、数据项列表,并允许扩展字段;ItemDatum 支持图标、标题、描述、数值、插图、子项等字段,同样可扩展。完整说明见 Data。

一维数据/列表数据

一维数据示例:

SYNTAX
data title 信息图标题 desc 这是信息图的描述文本 items - icon https://example.com/icon1.svg label 数据项 1 desc 这是数据项 1 的描述 - icon https://example.com/icon2.svg label 数据项 2 desc 这是数据项 2 的描述

层级数据

层级数据可通过 children 递归嵌套:

SYNTAX
data title 信息图标题 desc 这是信息图的描述文本 items - label 一级数据项 1 children - label 二级数据项 1-1 - label 二级数据项 1-2 - label 一级数据项 2 children - label 二级数据项 2-1

Note

数据使用请注意以下事项:

  • 结构/数据项未必消费全部字段;缺失必需字段可能影响渲染,使用前请查阅结构与数据项说明
  • 扩展字段需在自定义结构或数据项中手动访问并映射
  • 使用资源字段前请阅读资源
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
TS
export interface Data {
title?: string;
desc?: string;
items: ItemDatum[];
[key: string]: any;
}

export interface ItemDatum {
icon?: string | ResourceConfig;
label?: string;
desc?: string;
value?: number;
illus?: string | ResourceConfig;
children?: ItemDatum[];
[key: string]: any;
}
SYNTAX
data
title 信息图标题
desc 这是信息图的描述文本
items
- icon https://example.com/icon1.svg
label 数据项 1
desc 这是数据项 1 的描述
- icon https://example.com/icon2.svg
label 数据项 2
desc 这是数据项 2 的描述
SYNTAX
data
title 信息图标题
desc 这是信息图的描述文本
items
- label 一级数据项 1
children
- label 二级数据项 1-1
- label 二级数据项 1-2
- label 一级数据项 2
children
- label 二级数据项 2-1