阿里G2插件——柱状统计图，长变量值显示设置

一、背景

使用g2插件绘制柱形图，发现对于某些长文本的显示并不理想。在限定的区域内，无论是放在X轴还是Y轴，文本显示不完整或是出现重叠，影响图表查阅。于是，在翻阅插件提供的API后，选择将文本设置显示在柱状图内，以实现较好的效果。
本文基于插件3.4.9版本
建议参阅官方文档

二、基础使用

效果图如下：
看着没什么问题，如果商品名称很长呢？

长文本在Y轴显示不全：

三、优化文本显示位置

简单来说，就是让Y轴上的文本，显示在柱形图内，这样，就不虞文本显示不全的问题

chart 
  .interval()
  .position('name*num')
  .tooltip('num')
  .color('name')
  .opacity(1)
  .label('name',function(){//在function中设置效果
		return {
		  position: 'bottom',
		  offset: 0,
		  textStyle: { fill: '#fff' }
		};
	})
	.shape('top-line');
//不显示Y轴值
chart.axis("name", {
		title: " ",
		label: false
	});
//不显示图例
chart.legend(false); 

增添的代码作用，在于设置了label的显示形式，即数据对象中的"name"值以什么样的形式显示在图表中。此时，为了避免重复说明，可以不显示Y轴和图例。
效果图如下：