@antv/g2踩坑记录

自定义tooltip

//需要先在绘图时配置自定义tooltip的需要的字段
chart.point()
.position('value*1')
.shape("pointer")
.tooltip('name*value*date',(name,value,date)=>{
	retrun {
		name,
		value,date
	}
})
//配置自定义tooltip
chart.tooltip({
	showContent:true,
	showTitle:false,
	title:"name",//配置g2-tooltip-title中显示的值
	containerTpl:"<div class='g2-tooltip'><div class='g2-tooltip-title'></div><div class='g2-tooltip-list'></div></div>",
	itemTpl:"<div class='g2-tooltip-item'>"+
	"<div class='g2-tooltip-marker'></div>"+
	"<div class='g2-tooltip-name'>{name}</div>"+
	"<div class='g2-tooltip-value'>{value}</div>"+
	"</div>",
	domStyles:{
	//设置tooltip对应样式
	}
});

绘制饼图

1. 饼图的绘制时初始化阶段必须设置data，否则将会绘制失败
2. 设置label时，content中可以使用转义字符

'percent'chart.interval().adjust('stack').position().lable({
	fields:['itemValue','itemName'],
	callback:(itemValue,itemName) =>{
		return {
			content:`表现值:${itemValue}\n得分:${itemScore}`
		}
	}
})

设置地图

1. 设置地图需要使用GeoJSON文件，数据类型主要有Point（点）、MultiPoint（多点）、LineString（线）、MultiLineString（多线）、Polygon（面）、MultiPolygon（多面）、GeometryCollection（几何对象的集合）

Polygon类型中国地图链接：https://gw.alipayobjects.com/os/antvdemo/assets/data/china-provinces.geo.json

MultiPolygon类型中国地图链接：http://datav.aliyun.com/tools/atlas/#&lat=52.671385903202584&lng=120.02838134765625&zoom=8

2.地图设置label时出现文字不在区域范围内的情况或者想要调整文字在区域范围内的位置的，可以使用limitInShape来自定义lable布局

limitInshape(items,labels,shapes,region){
	labels.forEach((lable,index)=>{
		label.translate();
	})
}

绘制面积图

//使用shape方法，定制绘制线的形状
//使用adjust方法，设置是否层叠样式
chart.line().position().adjust().shape("smooth") 
//绘制标准线
chart.annotation().line({
	start:()=>{},
	end:()=>{},
	style:{}//定制样式
})
//interaction方法定制交互
chart.interaction()
//使用axis方法设置坐标轴的样式
chart.axis()

legend 问题

4.0.15版本bug legend设置offsetX或offsetY后首次点击后图例会发生位移。

解决方法：
在初始化之后直接调用changeData()方法

面积图图例间隔

chart.legend({
	maxItemWidth:0.3,
	itemSpacing:0
})