logoCreated with Sketch.

F2

标注 - Guide

阅读时间约 3 分钟

提示和标注， 主要用于在图表上标识额外的标记注解。目前内置PointGuide点标注、TextGuide文本标注、TagGuide标注、ImageGuide图片标注和LineGuide线标注，也可以自定义标注。

Usage

import { Canvas, Chart, Interval, TextGuide } from '@antv/f2';
const data = [
  { genre: 'Sports', sold: 5 },
  { genre: 'Strategy', sold: 10 },
  { genre: 'Action', sold: 20 },
  { genre: 'Shooter', sold: 20 },
  { genre: 'Other', sold: 40 },
];

<Canvas context={context}>
  <Chart data={data}>
    <Axis field="genre" />
    <Interval x="genre" y="sold" />
    {data.map((item) => {
      const { sold } = item;
      return (
        <TextGuide
          records={[item]}
          content={`${sold}`}
          attrs={{
            fill: '#000',
            fontSize: '24px',
          }}
          offsetY={-20}
          offsetX={-15}
        />
      );
    })}
  </Chart>
</Canvas>;

Props

records: Array

数据项

可传入具体数据项，表示在改数据位置标注内容

<Guide records={[{ genre: 'Sports', sold: 5 }]}>

比例值

可传入比例值，可选值: 'min' | 'median' | 'max' | '0%' | '50%' | '100'

// 表示在 genre 的最小值，sold 的最大值位置标注内容
<Guide records={[{ genre: 'min', sold: 'max' }]}>

style

标注样式

PointGuide

标注点

offsetX: number

x 轴偏移量

offsetY: number

y 轴偏移量

TextGuide

文本标注

content: string

文本内容

offsetX: number

x 轴偏移量

offsetY: number

y 轴偏移量

TagGuide

标签标注

content: string

文本内容

offsetX: number

x 轴偏移量

offsetY: number

y 轴偏移量

direct: string

可选值为:

  'tl' | 'tc' | 'tr'
  'cl' |      | 'cr'
  'bl' | 'bc' | 'br'

background: Attrs

类型为绘图属性：图形属性

triggerRef: any

tagGuide 实例

textStyle: TextAttr

类型为绘图属性：文本属性 文本样式文本样式

ImageGuide

图片标注

src: string

图片地址

attrs

图片属性 更多详见：绘图属性 - ShapeAttrs

offsetX: number

x 轴偏移量

offsetY: number

y 轴偏移量

LineGuide

辅助线标注

offsetX: number

x 轴偏移量

offsetY: number

y 轴偏移量

demo 示例