logo

F2

  • Manual
  • Component Documentation
  • Examples
  • Productsantv logo arrow
  • 5.0.3
  • 快速上手
  • 图表组成
  • 图形语法
  • 数据
  • 度量
  • 坐标系
  • Framework
    • 小程序上渲染 F2
  • Advanced
  • Question

图表组成

Previous
快速上手
Next
图形语法

Resources

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-互动图形解决方案
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

为了更好得使用 F2 进行数据可视化,我们需要了解 F2 图表的组成以及相关术语。

图表部件

一般情况下,F2 的图表包含坐标轴(Axis)、几何标记(Geometry)、提示信息(Tooltip)、图例(Legend)等,另外还可以包括辅助标记(Guide)、数据标签(dataLabels)等。

F2 基本组成部分如下图所示:

术语

术语英文描述
坐标轴Axis每个图表通常包含两个坐标轴,在直角坐标系(笛卡尔坐标系)下,分别为 x 轴和 y 轴,在极坐标轴下,则分别由角度和半径 2 个维度构成。每个坐标轴由坐标轴线(line)、刻度线(tickLine)、刻度文本(label)以及网格线(grid)组成。
图例Legend图例作为图表的辅助元素,用于标定不同的数据类型以及数据的范围,用于辅助阅读图表以及帮助用户在图表中进行数据的筛选过滤。
几何标记Geometry即我们所说的点、线、面这些几何图形,在图形语法 中几何标记的类型决定了生成图表的类型。也就是数据被可视化后的实际表现,不同的几何标记都包含对应的图形属性。
图形属性Attribute图形属性对应视觉编码中的视觉通道,是图形语法元素非常重要和灵活的一部分,不同的几何标记拥有自己的图形属性,F2 提供了位置(position)、颜色(color)、大小(size)、形状(shape)这四种图形属性。
坐标系Coordinate坐标系是将两种位置标度结合在一起组成的 2 维定位系统,描述了数据是如何映射到图形所在的平面。
提示信息Tooltip当鼠标悬停在某个点上时,会以提示框的形式显示当前点对应的数据的信息,比如该点的值,数据单位等,帮助用户从图表中获取具体的数据信息。
辅助标记Guide当需要在图表上绘制一些辅助线、辅助框或者文本时,比如增加预警线、最高值线或者标示明显的范围区域时,辅助标记 Guide 是非常有用的工具。