G2

概述

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

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

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

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();

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

配置项

属性	描述	类型	默认值
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	绘制文本
badge	绘制带有标记的文本，形如一个气球

更多的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`，默认值为`start`	`string` \| `Function<string>`	-
textBaseline	设置在绘制文本时使用的当前文本基线, 支持的属性:`top` \| `middle` \| `bottom` \| `alphabetic` \| `hanging`。默认值为`bottom`	`string` \| `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	文本在水平方向的偏移量	`number`	-
dy	文本在垂直方向的偏移量	`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	标记大小	`number`	24
markerFill	标记填充色	`string`
markerFillOpacity	标记填充色透明度	`number`
markerStroke	标记描边色	`string`
markerStrokeOpacity	标记描边色透明度	`number`

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

尝试一下：

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/antvdemo/assets/data/blockchain.json',
    transform: [
      {
        type: 'fold',
        fields: ['blockchain', 'nlp'],
        key: 'type',
        value: 'value',
      },
    ],
  })
  .axis('x', { labelAutoHide: 'greedy' });

chart
  .line()
  .encode('x', (d) => new Date(d.date))
  .encode('y', 'value')
  .encode('color', 'type');

chart
  .text()
  .data([new Date('2017-12-17'), 100])
  .style({
    text: `2017-12-17, 受比特币影响，blockchain 搜索热度达到峰值：100`,
    wordWrap: true,
    wordWrapWidth: 164,
    dx: -174,
    dy: 30,
    fill: '#2C3542',
    fillOpacity: 0.65,
    fontSize: 10,
    background: true,
    backgroundRadius: 2,
    connector: true,
    startMarker: true,
    startMarkerFill: '#2C3542',
    startMarkerFillOpacity: 0.65,
  })
  .tooltip(false);

chart.render();

示例

怎么指定箭头图标的长度？

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

chart
  .vector()
  // ...
  .shape('vector')
  .style({
    arrowSize: 40,
    // arrowSize: '30%',
  });

怎么绘制峰值标记？

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

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

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();

概述

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

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

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();