logo

G2

  • 文档
  • API
  • 图表示例
  • 主题
  • 周边生态
  • 所有产品antv logo arrow
  • 5.3.2
  • 快速上手
  • 简介
    • 什么是 G2
    • 在前端框架中使用
    • Spec 和 API
  • 核心概念
    • 图表(Chart)
      • G2 图表组成
      • 如何使用图表
    • 标记(Mark)
      • 概览
      • area
      • box
      • boxplot
      • cell
      • chord
      • density
      • gauge
      • heatmap
      • image
      • interval
      • line
      • lineX
      • lineY
      • link
      • liquid
      • point
      • polygon
      • range
      • rangeX
      • rangeY
      • rect
      • shape
      • text
      • vector
      • wordCloud
    • 视图(View)
    • 数据(Data)
      • 概览
      • custom
      • ema
      • fetch
      • filter
      • fold
      • inline
      • join
      • kde
      • log
      • map
      • pick
      • rename
      • slice
      • sort
      • sortBy
    • 编码(Encode)
    • 比例尺(Scale)
      • 概览
      • band
      • linear
      • log
      • ordinal
      • point
      • pow
      • quantile
      • quantize
      • sqrt
      • threshold
      • time
    • 转换(Transform)
      • 概览
      • bin
      • binX
      • diffY
      • dodgeX
      • flexX
      • group
      • groupColor
      • groupX
      • groupY
      • jitter
      • jitterX
      • jitterY
      • normalizeY
      • pack
      • sample
      • select
      • selectX
      • selectY
      • sortColor
      • sortX
      • sortY
      • stackEnter
      • stackY
      • symmetryY
    • 坐标系(Coordinate)
      • 概览
      • fisheye
      • parallel
      • polar
      • radial
      • theta
      • transpose
      • cartesian3D
      • helix
    • 样式(Style)
    • 动画(Animate)
      • 概览
      • fadeIn
      • fadeOut
      • growInX
      • growInY
      • morphing
      • pathIn
      • scaleInX
      • scaleInY
      • scaleOutX
      • scaleOutY
      • waveIn
      • zoomIn
      • zoomOut
    • 状态(State)
    • 交互(Interaction)
      • 概览
      • brushAxisHighlight
      • brushHighlight
      • brushXHighlight
      • brushYHighlight
      • brushFilter
      • brushXFilter
      • brushYFilter
      • chartIndex
      • elementHighlight
      • elementHighlightByColor
      • elementHighlightByX
      • elementSelect
      • elementSelectByColor
      • elementSelectByX
      • fisheye
      • legendFilter
      • legendHighlight
      • poptip
      • scrollbarFilter
      • sliderFilter
    • 复合(Composition)
      • 概览
      • facetCircle
      • facetRect
      • repeatMatrix
      • spaceFlex
      • spaceLayer
      • timingKeyframe
    • 主题(Theme)
      • 概览
      • academy
      • classic
      • classicDark
    • 事件(Event)
    • 颜色映射(Color)
  • 图表组件
    • 标题(Title)
    • 坐标轴(Axis)
    • 图例(Legend)
    • 滚动条(Scrollbar)
    • 缩略轴(Slider)
    • 提示信息(Tooltip)
    • 数据标签(Label)
  • 进阶主题
    • 关系图(Graph)
      • forceGraph
      • pack
      • sankey
      • tree
      • treemap
    • 地图(Geo)
      • geoPath
      • geoView
    • 3D 图表(3D Chart)
      • 绘制 3D 图表
      • point3D
      • line3D
      • interval3D
      • surface3D
    • 插件扩展(Plugin)
      • renderer
      • rough
      • lottie
    • 按需打包
    • 设置纹理
    • 绘制 3D 图表
    • 服务端渲染(SSR)
    • Spec 函数表达式支持 (5.3.0 支持)
  • 版本特性
    • 新版本特性
    • v4 升级 v5 指南
  • 常见问题 FAQ

text

上一篇
shape
下一篇
vector

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...

概述

Text 是一种用于在图表中绘制文本标记的图形元素。它允许用户直接在图表上添加文字注释、标签或其他说明性内容,从而增强数据可视化的效果和可读性。Text 标记具备有大量的视觉映射通道:x,y,color,fontSize,rotate 等,除此之外,还有大量的文本样式相关的配置,可以通过可视化映射的方式,让文本可视化具备有更强的表达性。一般用于几个场景:

  • 文本可视化
  • 数据的标注和辅助

(() => {
const chart = new G2.Chart();
chart.options({
type: 'view', // 图表类型为 'view'
autoFit: true,
data: {
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
},
children: [
// 配置柱状图
{
type: 'interval',
encode: { x: 'letter', y: 'frequency' },
axis: { y: { labelFormatter: '.0%' } },
},
{
type: 'text', // 子视图类型为 'text',表示文本标签
encode: { x: 'letter', y: 'frequency', text: 'frequency' }, // 数据编码配置,x 轴对应 'letter' 字段,y 轴对应 'frequency' 字段,文本内容为 'frequency' 字段的值
style: { fill: 'black', textAlign: 'center', dy: -5 }, // 文本样式配置,填充颜色为黑色,文本水平居中,y 方向上偏移 -5 像素
},
],
});
chart.render();
return chart.getContainer();
})();

更多的案例,可以查看图表示例页面。

配置项

属性描述类型默认值必选
encode配置 text 标记的视觉通道,包括x、y、color、shape等,用于指定视觉元素属性和数据之间的关系encode-
style配置 text 图形样式style-
scale配置 text 标记的图形缩放,包括text、fontSize等scale-

encode

配置 text 标记的视觉通道,定义数据字段与视觉属性之间映射关系的重要配置,它决定了数据如何转化为视觉表现。

属性描述类型默认值
x绑定 text 标记的 x 属性通道encode-
y绑定 text 标记的 y 属性通道encode-
text绑定 text 标记的 text 属性通道encode-
shape绑定 text 标记的 shape 属性通道encode-

shape

配置文本容器的形状

图形描述示例
text绘制文本link
badge绘制带有标记的文本,形如一个气球link

更多的encode配置,可以查查看 encode 介绍页面。

scale

scale用于定义数据如何映射到视觉属性。

属性描述类型默认值
text定义文本映射规则scale>{type: identity}
fontSize定义文本字体大小的映射规则scale>{type: identity}
rotate定义文本旋转的映射规则scale>{type: identity}

更多的scale配置,可以查查看 scale 介绍页面。

style

style 用于设置文本的外观样式,包括填充颜色、边框样式、阴影效果等。

属性描述类型默认值
shape修改文本容器图形,与encode中shape属性通道配置一致string | Function<string>-
fontSize文字大小number | Function<number>-
fontFamily文字字体string | Function<string>-
fontWeight字体粗细number | Function<number>-
lineHeight文字的行高number | Function<number>-
textAlign设置文本内容的当前对齐方式, 支持的属性:center | end | left | right | start,默认值为startstring | Function<string>-
textBaseline设置在绘制文本时使用的当前文本基线, 支持的属性:top | middle | bottom | alphabetic | hanging。默认值为bottomstring | Function<string>-
fill图形的填充色string | Function<string>-
fillOpacity图形的填充透明度number | Function<number>-
stroke图形的描边string | Function<string>-
strokeOpacity描边透明度number | Function<number>-
lineWidth图形描边的宽度number | Function<number>-
lineDash描边的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。[number,number] | Function<[number, number]>-
opacity图形的整体透明度number | Function<number>-
shadowColor图形阴影颜色string | Function<string>-
shadowBlur图形阴影的高斯模糊系数number | Function<number>-
shadowOffsetX设置阴影距图形的水平距离number | Function<number>-
shadowOffsetY设置阴影距图形的垂直距离number | Function<number>-
cursor鼠标样式。同 css 的鼠标样式,默认 'default'。string | Function<string>'default'
dx文本在 x 方向上的偏移量number-
dy文本在 y 方向上的偏移量number-
text要绘制的文本内容string-
x文本的 x 坐标string-
y文本的 y 坐标string-
wordWrap是否启用文本换行boolean-
wordWrapWidth文本换行的最大宽度number-
background文本的背景色string-
backgroundRadius文本背景的圆角半径boolean-
mark连接线(link)的标记的属性mark-
transform配置文本变形属性string-
color这是文本颜色string-

mark

当 shape为badge时,style还有以下配置。

属性描述类型默认值
markerSize标记大小number24
markerFill标记填充色string
markerFillOpacity标记填充色透明度number
markerStroke标记描边色string
markerStrokeOpacity标记描边色 透明度number

更多的style配置,可以查看 style 介绍页面。

尝试一下:

示例

  • 怎么指定箭头图标的长度?

有两种指定箭头图标长度的方式,一种是通过填写像素值,比如 40,来指定为固定长度;另外一种是通过指定一个百分比,比如 30%,来指定参考箭头长度的相对长度。默认值为 40%。如下示例:

chart
.vector()
// ...
.shape('vector')
.style({
arrowSize: 40,
// arrowSize: '30%',
});
  • 怎么绘制峰值标记?

配置 selectY 数据转换,设置分组 groupBy: 'color'表示针对 color 通道进行分组,并且设置最大值选择器 selector: 'max',表示使用 max 选择器进行指定的数据抽取,输出到 y 通道。这样就可以在每条折线的最大值处绘制 text 标记了。

(() => {
const chart = new G2.Chart();
chart.options({
type: 'view',
data: [
{ month: 'Jan', city: 'Tokyo', temperature: 7 },
{ month: 'Jan', city: 'London', temperature: 3.9 },
{ month: 'Feb', city: 'Tokyo', temperature: 6.9 },
{ month: 'Feb', city: 'London', temperature: 4.2 },
{ month: 'Mar', city: 'Tokyo', temperature: 9.5 },
{ month: 'Mar', city: 'London', temperature: 5.7 },
{ month: 'Apr', city: 'Tokyo', temperature: 14.5 },
{ month: 'Apr', city: 'London', temperature: 8.5 },
{ month: 'May', city: 'Tokyo', temperature: 18.4 },
{ month: 'May', city: 'London', temperature: 11.9 },
{ month: 'Jun', city: 'Tokyo', temperature: 21.5 },
{ month: 'Jun', city: 'London', temperature: 15.2 },
{ month: 'Jul', city: 'Tokyo', temperature: 25.2 },
{ month: 'Jul', city: 'London', temperature: 17 },
{ month: 'Aug', city: 'Tokyo', temperature: 26.5 },
{ month: 'Aug', city: 'London', temperature: 16.6 },
{ month: 'Sep', city: 'Tokyo', temperature: 23.3 },
{ month: 'Sep', city: 'London', temperature: 14.2 },
{ month: 'Oct', city: 'Tokyo', temperature: 18.3 },
{ month: 'Oct', city: 'London', temperature: 10.3 },
{ month: 'Nov', city: 'Tokyo', temperature: 13.9 },
{ month: 'Nov', city: 'London', temperature: 6.6 },
{ month: 'Dec', city: 'Tokyo', temperature: 9.6 },
{ month: 'Dec', city: 'London', temperature: 4.8 },
],
encode: { x: 'month', y: 'temperature', color: 'city' },
scale: { x: { range: [0, 1] }, y: { nice: true } },
axis: { y: { labelFormatter: (d) => d + '°C' } },
children: [
{ type: 'line', encode: { shape: 'smooth' } },
{
type: 'text',
encode: {
x: 'month',
y: 'temperature',
text: (d) => `峰值:${d.temperature}`,
},
transform: [
{
type: 'selectY',
groupBy: 'color',
selector: 'max',
},
],
style: {
fill: 'orange',
fontSize: 16,
dy: -15,
},
tooltip: false,
},
{
type: 'point',
encode: { x: 'month', y: 'temperature' },
transform: [
{
type: 'selectY',
groupBy: 'color',
selector: 'max',
},
],
tooltip: false,
},
],
});
chart.render();
return chart.getContainer();
})();