logo

F2

  • 教程
  • 组件API
  • 图表示例
  • 所有产品antv logo arrow
  • 5.0.3
  • 快速上手
  • 图表组成
  • 图形语法
  • 数据 - Data
  • 度量 - Scale
  • 坐标系 - Coordinate
  • 图形标签 - Shape
  • 绘图属性 - Style
  • 动画属性 - Animation
  • 事件属性 - Event
  • 图形使用 - JSX
  • 组件介绍 - Component
  • 多端/框架 - Framework
    • 多端适配
    • 如何在 React 中使用
    • 如何在 Vue 中使用
    • 如何在小程序中使用
    • 如何在 Node.js 中使用
    • 配置 jsx transform
    • 使用 svg 渲染
  • 进阶 - Advanced
    • 自定义 View
  • 常见问题 - Question
    • 和 React 同时使用时,TS 类型报错

图形语法

上一篇
图表组成
下一篇
数据 - Data

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

简介

F2 同 G2 一样,基于《The Grammar of Graphics》(Leland Wilkinson 著)一书所提的图形理论。该理论是一套用来描述所有统计图形深层特性的语法规则,该语法回答了『什么是统计图形』这一问题,以自底向上的方式组织最基本的元素形成更高级的元素。

所以对于 F2 来说,没有具体的图表类型的概念,所有的图表都是通过组合不同的图形语法元素形成的

数据

  • 最基础的部分是你想要可视化的数据以及一系列将数据中的变量对应到绘图属性的映射;

几何标记

  • 几何标记,可以理解为你在图表中实际看到的图形元素,如点、线、多边形等,每个几何标记对象含有多个图形属性,F2 图形语法的核心就是建立数据中的一系列变量到图形属性的映射;

度量

  • 度量,作为数据空间到图形属性空间的转换桥梁,每一个图形属性都对应着一个或者多个度量;

坐标系

  • 坐标系,描述了数据是如何映射到图形所在的平面的,一个几何标记在不同坐标系下会有不同的表现。目前 F2 提供了笛卡尔坐标系、极坐标系两种坐标系;

辅助元素

  • 辅助元素是为了增强图表的可读性和可理解性,F2 中的辅助元素包含坐标轴 Axis、图例 Legend、提示信息 Tooltip、静态辅助标记 Guide。

所以,在 F2 中,我们通常这么描述一张图表:一张图表就是从数据到几何标记对象的图形属性的一个映射,此外图形中还可能包含数据的统计变换,最后绘制在某个特定的坐标系中。

更多内容请阅读以下篇章:

  • 图表组成

  • 数据

  • 度量

  • 几何标记

  • 绘图属性

  • 坐标系