g2图表有些api的属性不全,文档看着有些费劲,所以整理了一些项目中用到的柱状图的简单配置项
图标初始化
const chart = new Chart({
container: this.rootRef.current, //图标容器使用react的createRef()指定
autoFit: true, //图标的宽度自适应
height: isYesNoLabel ? 500 : chartH,
});
chart.data(data); //导入数据data:[{type:srting,value:number},{},{}]
const labelWidth = (chart.width/data.length)
//g2的x轴labe超长时自适应会有些问题,所以自己写了个判断x轴坐标label超长旋转方法
const isRotateOrNot = data.some(item=>getPixLength(item.type)>labelWidth)
//根据是否旋转label来设置图表的padding值,如果设为auto的话,xTitle会被挤出canvas画布,chart.padding设置可行,但是chart.height或者.width都不行
chart.padding = isRotateOrNot ? [20, 50, 150, 100]: [30, 50, 50, 100]
柱体颜色、宽度
chart.legend(false);关闭图例
const isSettingSizeInstance = chart
.interval() //设置柱状图
.position('type*value') //指定展示的数据
.