数据标签 - Label

阅读时间约 1 分钟

🏷️ 在图表中,标签是对当前的一组数据进行的内容标注。包括数据点、拉线、文本数值等元素,根据不同的图表类型选择使用。

🎨 前往墨者学院 AntV 设计 | 标签 Label 查看设计指引

配置属性 - LabelCfg

属性名类型介绍
typestring当用户使用了自定义的 label 类型,需要声明具体的 type 类型,否则会使用默认的 label 类型渲染(饼图 label 支持 inner|outer|spider
offsetnumberlabel 的偏移量
offsetXnumberlabel 相对于数据点在 X 方向的偏移距离
offsetYnumberlabel 相对于数据点在 Y 方向的偏移距离
contentstring | IGroup | IShape | GeometryLabelContentCallback展示的文本内容,如果不声明则按照参与映射的第一字段的值进行显示
styleShapeAttrslabel 文本图形属性样式
autoRotatestring是否自动旋转,默认 true
rotatenumber文本旋转角度
labelLinenull | boolean | LabelLineCfg用于设置文本连接线的样式属性,null 表示不展示。
labelEmitboolean只对极坐标下的文本生效,表示文本是否按照角度进行放射状显示,true 表示开启,false 表示关闭
layout'overlap' | 'fixedOverlap' | 'limitInShape'文本布局类型,支持多种布局函数组合使用。
position'top' | 'bottom' | 'middle' | 'left' | 'right'指定当前 label 与当前图形的相对位置
animateboolean | AnimateOption动画配置。
formatterFunction格式化函数
autoHideboolean是否自动隐藏,默认 false

LabelLineCfg 类型定义如下:(关于 ShapeAttrs 详细查看 ShapeAttrs 文档)

type LabelLineCfg = {
  style?: ShapeAttrs;
}

示例代码:

{
  label: {
    style: {
      fill: 'red',
      opacity: 0.6,
      fontSize: 24
    },
    rotate: true
  }
}

标签布局

通过 label.layout 可以设置标签布局,来进行标签显示策略的处理。

示例:

{
  label: {
    layout: [
      // 适用于柱状图的标签遮挡处理,会对遮挡的标签进行隐藏
      { type: 'interval-hide-overlap' }
    ]
  }
}
详细文档梳理中