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之间相互覆盖，通过尝试向四周偏移来剔除放不下的labelfixedOverlap:不改变label位置的情况下对相互折叠的label进行调整limitlnShape:剔除shape容纳不了的label

配置方式：

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

图表动画配置

动画类型

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

动画类型解释appear图表第一次加载时的入场动画enter图表绘制完成，发生更新后，产生的新图形的进场动画update图表绘制完成，数据发生变更后，有状态变更的图形的更新动画leave图标绘制完成，数据发生变更后，被销毁图形的销毁动画

参与动画的元素

G2图表中默认参与动画的元素

Geometry shapesGeometry labels图表组件ComponentAxis tickslabelsgrid Annotation

注意：G2位Geometry shapes内置了初始化时的群组入场动画，如果自己配置的有appear动画执行函数，则以该动画为主。

动画配置

G2在Chart/View,Geometry,Geometry Label 以及组件层次都开放了动画接口，即只要是参与动画的图形元素都可以单独进行动画配置

chart

chart.animate(boolean) 开启或者关闭chart动画 注：当chart.animate(false)关闭动画时，该图表所有的元素都不会进行动画

view

view.animate(boolean) 开启或者关闭view上的动画 注：当view.animate(false)关闭动画时，该试图下所有的元素都不会进行动画

Geometry

包含Geometry Shapes 以及 Geometry labels

geometry.animate(false);//Geometry不执行动画 getmetry.animate(cfg);//进行具体的动画配置，详见:base.d.ts 456

Geometry label 上的动画配置

geometry.label(name,{ animate:AnimateOption | false //详见:base.d.ts 491 })

图表组件

对于图表组件的动画，G2只支持开关操作

chart.axis(name:{ animate:boolean }) chart.annotation().line({ animate:boolean })

内置默认动画函数

animation说明‘fade-in’渐现动画‘fade-out’渐隐动画‘grow-in-x’容器沿x方向放大的矩阵动画，多用于G.Group容器类进行动画‘grow’-in-y容器沿着y方向放大的矩阵动画，多用于G.Group容器类进行动画‘grow-in-xy’容器沿着x,y方向放大的矩阵动画，多用于G.Group容器类进行动画‘scale-in-x’单个图形沿着x方向的生长动画‘scale-in-y’单个图形沿着y方向的生长动画‘wave-in’划入入场动画效果，不同坐标系下效果不同‘zoom-in’沿着图形中心点的放大动画‘zoom-out’沿着图形中心点的缩小动画‘path-in’path路径入场动画‘position-update’图形位置移动动画

配置图标主题

G2在绘图时，首先会确定数据是如何展示的，然后再通过主题系统对细节进行控制。在G2中主题控制着图表的非数据元素外观，包括图表的坐标轴、图例、网格线等的样式及几何标记的颜色搭配等 可以在G2中：

使用内置主题修改内置主题的某些元素注册自定义元素

使用内置主题

G2提供了一种内置主题，命名为‘default’。同时可以使用以下方法对主题进行切换或者修改

在初始化chart时指定 const chart =new Chart({ container:'container', theme:'dark',//使用命名为dark的主题 }); const chart1 = new Chart({ container:'container', theme:{ defaultColor:'red' }//修改内置主题的某些配置 }) 通过chart.theme()接口配置 //创建图表的时候切换主题 chart.theme('dark'); chart.render();//渲染图表 //图表渲染后，动态切换主题 chart.theme({ defaultColor:'red' })//修改内置主题的某些配置 chart.render(true);

注意：chart.theme()声明之后，必须调用chart.render()/chart.render(true)方可生效,如果是动态切换主题场景，建议调用chart.render(true)

在view上配置主题 //在创建view的时候声明主题 const view = chart.createView({theme:'dark'}) //在创建view的时候修改主题 const view =chart.createView({ theme:{defaultColor:red} }) //通过theme()接口声明 view.theme('dark'); view.theme({ defaultColor:'red' })

注：view.theme()声明之后，必须调用chart.render()/chart.render(true)生效，如果是动态切换主题场景，建议调用chart.render(true)

在Geometry上配置主题 chart.interval({ theme:{ defaultColor:'red' } })

注册自定义主题

G2提供了自定义主题机制以允许用户切换，定义图表主题。包括：

定义全新的主题结构使用主题样式表，实现主题的快速定制

定义全新的主题结构

import {registerTheme,Chart} from '@antv/g2' //注册主题 registerTheme(name,{ defaultColor:'red' }) //使用 chart.theme(name); chart.render()

主题属性

主题属性类型描述defaultColorstring主题色paddingnumber间隔fontFamilystring图表字体colors10string[]分类颜色色板，分类个数小于10使用colors20string[]分类颜色色板，分类个数大于10使用columnWidthRationumber一般柱状图宽度占比，0-1范围数值maxColumnWidthnumber柱状图最大宽度，像素值minColumnWidthnumber柱状图最小宽度，像素值roseWidthRationumber玫瑰图占比，0-1范围数值multiplePiewWidthRatio多层饼图/环图占比，0-1范围数值shapesobject配置每个Geometry映射的shape类型sizesnumber配置geometry映射size范围geometriesobject配置每个Geometry下每个shape的样式，包括默认样式以及各个状态下的样式componentsobject配置坐标轴，图例，tooltip，annotation的主题样式labelsobject配置Geometry下label的主题样式innerLabelsobject配置Geometry下展示在图形内部的labels的主题样式pieLabelsobject配置饼图labels的主题样式

使用数据调整

数据调整可以使得图形在画布上不互相重叠 G2支持以下数据调整:

stack(层叠)

将同一个分类的数据值累加起来。以层叠的柱状图为例，x轴方向的同一个分类下面的数据，按照顺序，将y轴对应的值累加，最终将数据调整的不再层叠

适合的数据类型

层叠数据，适用于分类数据和连续数据，只要x轴方向的值相同，就会对y轴方向的值进行层叠处理

适合的几何标记

几何标记描述配置point层叠的点图chart.point().adjust(‘stack’)interval层叠的柱状图、玫瑰图chart.interval().adjust(‘stack’)

jitter(扰动散开)

将数据的位置轻微的调整，使得映射后的图形位置不再重叠

适合的数据类型

jitter,仅适合于分类数据，只能在同一个分类的范围内散开，这不会改变图形表现的分类值。但是连续数据不能进行散开，连续数据位置一旦变化，图形代表的数据值就会不准确，会带来误导。对数据进行jitter调整时，需要将分类数据转换成索引值，在索引值[-0.5,0.5]的范围内进行随机分布

适合的几何标记

几何标记描述配置point散开的点图chart.point().adjust(‘jitter’)

dodge(分组散开)

将同一个分类的数据进行分组在一个范围内均匀分布

适合的数据

dodge是将同一个分类的数据均匀的分布的范围内，形成分组效果，同样不适合连续数据。dodge跟jitter的差别在于：

dodge的数据在分类范围内将数据均匀分布如果数据只有一维，y轴方向无数据，那么jitter在整个y轴方向随机分布，而dodge在y轴方向层叠分布

适合的几何标记

几何标记描述配置point一维点图chart.point().adjust(‘dodge’)interval二维的柱状体、玫瑰图chart.interval.adjust(‘dodge’)

symmetric(数据对称)

使得生成的图形居中对齐

适合的数据

symmetric将数据沿y轴进行对称处理，所以适合处理连续数据。由于对称处理将单个值的数据处理成了有上下限的数值，所以不会引起数据的误解 计算公式：offset = (max-min-value)/2

适合的几何标记

几何标记描述配置interval漏斗图chart.interval().adjust(‘symmetric’)area数据流图：对称的层叠区域图chart.area().adjust(‘symmetric’)

数据调整的原则

不改变数据的含义，给用户带来误解数据调整的界限要清晰，不能混淆不同类别的数据定量（连续）数据只能进行数据的累加和对称，分类数据只能在当前分类的范围内调整数据

图表事件使用

G2提供的事件机制有：

Chart/View声明周期的事件基础的画布事件数据映射到图形Element上的事件组件上的事件 这些事件都可以在Chart和View上进行绑定和移除绑定

绑定和解除绑定

在Chart和View上提供几个方法用于绑定事件、移除绑定事件：

-on('eventName',callback(event){})绑定事件 -off('eventName',[callback])移除事件

event 对象

Chart和Shape的事件抛出的事件对象event上包含以下属性:

target:触发的对象，图形或者Canvas对象view:当前target所属的viewgEvent:从底层G的绘图层抛出来的事件。详情参考:G的事件详解event:dom层的事件x:触发的位置x，相对于画布左上角的位置y：触发的位置y，相对于画布左上角的位置clientX:视窗的位置xclientY:视窗的位置y

生命周期的事件

Chart和View的生命周期提供了以下事件

beforeender：事件发生在渲染前afterrender: 事件发生在渲染后beforepaint: 组件，图形元素绘制前afterpaint: 组件，图形元素绘制后beforechangedata: 更新数据前afterchangedata : 更新数据后beforeclear：调用clear方法清除View或者Chart前触发afterclear：调用clear方法清除View或者Chart前触发beforedestroy：销毁View或者Chart前触发

基础的画布事件

可以在Chart和view上监听所有的浏览器事件，G实现了DOM具备的常用事件

mousedownmouseupdblclickmouseentermouseoutmouseovermousemovemouseleavecontaxtmenuclick

拖拽事件通过mousedown，mousemove和mouseup进行了模拟

dragstartdragdragenddragoverdragenterdragleavedrop

同时支持了移动端的几个事件

touchstarttouchmovetouchend

注：这些事件的事件对象可以通过event.gEvent访问到，事件上的具体属性可以参考：G的事件详解

图形Element上的事件

所有的图表绘图区域的图形都能响应各种事件，这些图形被封装成了图表元素Element，所有的基础画布事件都可以支持，为了便于使用，我们提供了委托事件的方式来方便用户绑定，其形式为name:eventName,主要有三种name:

所有的Element都支持‘element：eventName’的方式绑定事件，如‘element：click’不同的geometry各自支持不同的前缀，等同于geometry.type,例如：‘line’，‘area’用户在自定shape中，在shape，group上设置name字段

事件上的Element属性

可以通过shape.get(‘element’)对象来获取访问图形对应的Element对象

view.on('element:click',(ev)=>{ const shape =ev.shape; const element =shape.get('element'); const data =element.getModel().data })

图形element上支持的name的列表

G2默认支持的所有的事件前缀（name）:

element：所有的geometry的element都支持的事件前缀line：折线图支持的前缀interval：柱状图、直方图、饼图等支持的事件前缀point：点图、气泡图等支持的前缀schema：k线图、 箱型图支持的事件前缀edge：边支持的前缀

注意：

除了element是通用的事件前缀外，所有的geometry的type就是它们事件的前缀heatmap由于未创建任何element所以不支持任何事件前缀element上的获取返回的数据有些是单条数据，有些是多条数据的集合

状态事件

当Element上的状态发生改变时，会释放’element:statechange’事件，用户可以在Chart/View上监听该事件

chart.on('element:statechange',(eventObject)=>{ const {element,state,stateStatus} = eventObject.gEvent.originalEvent; //获取触发该事件的element，当前的状态，状态值 })

组件上的事件

组件同Element一样都支持name:eventName的委托事件，不同的组件上支持不同的事件名前缀，这些事件名前缀可以同基础画布的事件组合使用，这些事件名有：

axis

axis-label：坐标轴文本的事件的前缀axis-line：坐标轴轴线的事件前缀axis-tick：坐标轴刻度线的事件前缀axis-title：坐标轴标题事件前缀

legend

legend：图例的事件前缀，无论点击了图例的任意图形上legend-title：图例标题的事件前缀legend-item：图例选项的事件前缀legend-item-name：图例选项name文本的事件前缀legend-item-maker：图例选线marketing图标的事件前缀legend-item-value：图例选项value的事件前缀

annotation

annotation：所有辅助图形共同的事件前缀annotation-line：辅助线的事件前缀annotation-line-text：辅助线上的文本前缀annotation-image：辅助图形的事件前缀annotation-region：辅助区域的事件前缀annotation-text：辅助文本的事件前缀

tooltip

tooltip:showtooltip:hidetooltip:change

连续图例

legend:valuechanged

委托对象

chart.on('lengend-item:click',(ev)=>{ const target = ev.target; //所有的组件事件都可以从target上获得delegateObject const delegateObject = target.get('delegateObject'); const item = delegateObject.item;//图例选项 const component=delegateObject.component; //公有属性component属性 })

antv-g2学习手册-上 antv-g2学习手册-下