antv g2字体阴影_antv-g2学习手册-中

antv-g2学习手册-上

图形标注配置

图例标注(Annotation)作为G2图表的辅助元素，主要用于在图表上标识额外的标记注解。

图表标注类型

类型

描述

配置语法

arc

辅助弧线，只在极坐标系下生效。常用于绘制仪表盘

chart.annotaion().arc({})

image

辅助图片，在图表上添加辅助图片

chart.annotation().image({})

line

辅助线(可带文本)，例如表示平均值或者预期分布的直线

chart.annotation().line({})

text

辅助文本，指定位置添加文本说明

chart.annotion().text({})

region

辅助框，框选一段图区，设置背景，边框等

chart.annotation().region({})

regionFilter

区域着色，将图表中位于矩形选区中的图形元素提取出来，重新作色

chart.annotation().regionFileter({})

dataMarker

特殊数据点标注，多用于折线图和面积图

chart.annotation().dataMarker({})

dataRegion

特殊数据区间标注，多用于折线图和面积图

chart.annotation().dataRegion({})

注：配置项详情请看源码

清空图形标注

chart.annotation().clear()清空所有的图形标注，但是不会清空配置，当用户再次调用chart.render()时，所有的annotation会重新绘制

chart.annotation().clear(true)清空所有的图形标注同时清空配置

动态图形标注

G2图形标注接受的位置信息的参数都是原始数据值，辅助标记一旦生成后就是固定了位置，如果数据发生改变，辅助标记就需要删除掉重新创建。

如果数据是动态更新的那么这个过程需要频繁进行，基于这种场景Annotation提供了如下两种解决方案：

可以使用’min’,‘median’,'max’关键字，代表原始值的最小值、平均值、最大值，例如:[0,‘min’]表示x轴上数值为0，y轴位置在数值的最小值上;

表示位置的数组可以换成回调函数，函数原型:function(xScale,yScales){return [];}

注：XScale，yScale分别对应x轴的度量和所有y轴的度量

文本标签配置

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

如何显示文本标签

文本标签对应每一条数据记录，G2除了提供文本标签的显示功能外，还可以使用geometry.label()指定显示的内容、配置文本样式等

文本标签类型

针对不同的图表类型有不同的文本标签类型。G2默认提供了4种类型：

‘base’,默认类型，用于直角坐标系下的图表

‘interval’，用于interval几何标记下所有图形的文本标注，比如‘柱状图’等

‘pie’，专用于饼图的文本标注，带有文本连接线

‘polar’，用于极坐标系下图表的文本标注

G2已经根据用户声明的图形语法自动使用对应的文本标签类型，用户不需要再额外声明。但是当有特殊需求时(比如自定义了文本标签)，用户可以通过label()接口中的type属性指定具体的文本标签类型

标签布局

对于文本标签，当数据过于密集是，就会存在文本遮挡重叠的问题。

G2内置了三种文本布局方案

overlap:label防遮挡，为了防止label之间相互覆盖，通过尝试向四周偏移来剔除放不下的label

fixedOverlap:不改变label位置的情况下对相互折叠的label进行调整

limitlnShape:剔除shape容纳不了的label

配置方式：

geometry.label(name,{layout:{type:'fixed-overlap'}})

图表动画配置

动画类型

G2根据数据的装载更新，将动画分为以下四类：

动画类型

解释

appear

图表第一次加载时的入场动画

enter

图表绘制完成，发生更新后，产生的新图形的进场动画

update

图表绘制完成，数据发生变更后，有状态变更的图形的更新动画

leave

图标绘制完成，数据发生变更后，被销毁图形的销毁动画

参与动画的元素