AntV
AntV Infographic
文档
参考
示例
AI
企业版

目录

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

信息图语法

我们将通过 new Infographic 创建信息图时传入的配置项称为信息图语法,因为相比于传统的配置项,更像是一种描述信息图的“语言”,通过描述结构、布局、设计来组装出一个完整的信息图,但在具体实现上,我们仍然将其称之为 InfographicOptions 而非 InfographicSyntax,便于与现有的代码体系保持一致。

信息图语法受到 AntV G2 和 AntV G6 的图形语法的启发,并结合了信息图理论及相关设计原则,旨在简化信息图的创建过程,使用户能够更专注于内容和设计,而无需深入了解底层实现细节。

我们将信息图表示为:信息图 = 信息结构 + 图形表意

其中信息结构可以认为是数据的抽象表达,决定了信息图的内容和层次。

图形表意则是设计的抽象表达,决定了信息图的视觉呈现和风格。

InfographicOptions

信息图语法主要包含以下配置项:

属性类型必填说明引用
containerstring | HTMLElement否容器,可以是选择器或者 HTMLElement-
widthnumber | string否宽度,支持数字(像素值)或者百分比形式-
heightnumber | string否高度,支持数字(像素值)或者百分比形式-
paddingPadding否容器内边距Padding
templatestring否模板-
designDesignOptions否设计DesignOptions
dataData是数据Data
themestring否主题-
themeConfigThemeConfig否额外主题配置ThemeConfig
svgSVGOptions否svg 容器上的配置SVGOptions
上一章入门指南
下一章核心概念

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