antv/G2 v4使用遇坑之旅

1. 当container中指定是这个容器的id名时，如果要复用这个组件，那么会在当前id下创建多个一样的图表组件，且样式会乱掉。因为指明了当前id. 解决方案：改用refs去指定即可。

this.chart = new Chart({container: this.chartRef.current,autoFit: true,height: 220,
});render() {return <div id="hitogram" ref={this.chartRef} />;
}

2. 当你所使用的图表外侧包裹的容器使用了flex布局，会出现，图表不会自适应屏幕大小，会导致溢出。解决方案：使用百分比布局，不使用flex布局，另外需要延时调用forceFit()方法即可。若你发现遇到纵坐标轴会遮挡的情况，可以使用下面这个方法强制自适应。

setTimeout(() => {this.chart.forceFit();
}, 0);

3. 当使用了标注线，annotation的时候。在数据更新的时候，上一次的annotation仍然存在，导致会有很多重叠数据。解决方案：需要在绘制标注线之前，先清除标注线。

this.chart.annotation().clear(true);

4. 关闭横轴的label坐标轴的文字的自动旋转功能。由于x轴的自动旋转，文字很大概率会被遮挡，体验很差，所以加上此属性可以规避。

this.chart.axis('time', {label: {autoRotate: false, // 关闭自动旋转功能}
})

5. 当希望展现柱状图中每个柱子的间距很小，且柱子比较紧密。一开始使用了minColumnWidth， maxColumnWidth。使用了柱子的最小宽及最大宽。但这种情况，会有柱子重叠的情况，如下：

那么如何将柱子与柱子分隔开，且相对来说比较紧密。解决方案如下：

registerTheme('hitogramlineTheme', {columnWidthRatio: 0.75
});this.chart = new Chart({container: 'hitogramline',autoFit: true,height: 220,
});
this.chart.theme('hitogramlineTheme');

更改columnWidthRatio的属性即可。这是主题属性。以往3的版本是G2.Global.widthRatio.column = 0.75; 现在已经废弃了G2.Global方法。统一使用主题的columnWidthRatio的属性就好。加了此属性，效果如下：

6. 有遇到饼图渲染的时候，变成全黑的情况，如下：

排除了不是数据问题之后，发现原来是forceFit的原因。因为我在pie组件中渲染后面增加了下面这句代码：

setTimeout(() => {this.chart.forceFit();
}, 0);

去除掉这句代码结果就可以了。如下：

7. 柱状图渲染的时候，会发现横轴的末尾会有一段空白。如下图：

可以发现，1的位置是我的数据的最后一个点，但是却有2这段空白距离。百思不得其解。后来一步一步debug，才发现原来是nice这个属性的锅。看官网上对nice的解释：

这样就可以解释的通了。nice就是会在末尾增加一段间距让图表展示起来不那么局促，而一般这用在y轴上，而不是x轴。

更改以下代码即可：

this.chart.scale({time: {type: 'time', // 声明为 time 类型mask: 'MM-DD hh:mm', // 格式化日期}
});

注意nice属性不要写在x轴即可。

antv/G2 v4使用遇坑之旅相关推荐

基于AntV G2实现一个通用可视化Vue插件
前言 AntV G2坚持自然.确定性.意义感.生长性的设计价值观.与其他可视化插件不同的是,G2是以数据驱动的高交互可视化图形语法,具有高度的易用性和可扩展性. 随着业务可视化不断发展,数据复杂度越来 ...
antv g2字体阴影_antv g2坐标轴文字过长时添加省略号，悬浮显示全部
antv g2坐标轴文字过长时添加省略号,悬浮显示全部示例改编自antv基础条形图 https://g2.antv.vision/zh/examples/bar/basic#basic import ...
antvg2 环图轮播_在vue项目中引用Antv G2,以饼图为例讲解
我就废话不多说了,大家还是直接看代码吧~ npm install @antv/g2 --save template内容: js部分: //引入G2组件 import G2 from "@a ...
Android爬坑之旅：软键盘挡住输入框问题的终极解决方式
本文由BarryZhang原创,同一时候首发于diycode.cc.barryzhang.com .github.com/barryhappy.非商业转载请注明作者和原文链接. 前言开发做得久了.总 ...
React Native填坑之旅--动画篇
React Native填坑之旅--Button篇 React Native填坑之旅--动画 React Native填坑之旅--HTTP请求篇动画是提高用户体验不可缺少的一个元素.恰如其分的动画可 ...
Android爬坑之旅：软键盘挡住输入框问题的终极解决方案
前言开发做得久了,总免不了会遇到各种坑. 而在Android开发的路上,『软键盘挡住了输入框』这个坑,可谓是一个旷日持久的巨坑--来来来,我们慢慢看. 入门篇 Base 最基本的情况,如图所示:在页 ...
Vue踩坑之旅（一）—— 数组、对象的监听
作为一个接触 vue 才一个多月的小白,马上就接手基于 vue 的大型商城项目,其间真是跌跌撞撞踩了好多坑(o(╥﹏╥)o).在此写下自己的踩坑之旅,希望给跟我一样还在自学 vue 的同学一些帮助,另 ...
React Native微信支付开发爬坑之旅
早闻微信支付一直为移动开发者所诟病,这次公司项目新增微信支付需求,一试果然是一把辛酸泪,从配置到与后台调试真是一波三折,整整花了一天的时间才从坑里爬出来,效率也是低.所以有必要做下总结,日后再有微信支 ...
一次动态代理的填坑之旅
转载自一次动态代理的填坑之旅背景想在现有的接口加上熔断降级或者限流的功能,比较好的方式是通过注解的方式,并基于动态代理进行实现,下面代码是Rhino的实现 @Rhino public clas ...

antv/G2 v4使用遇坑之旅

antv/G2 v4使用遇坑之旅相关推荐

最新文章

热门文章