ucharts中在微信小程序canvas最高级遮盖弹出层问题解决

ucharts官方文档中给出了解决方案,但是我在使用的时候还是碰到了问题,这里就记录一下

首要说明:

我在uniapp上用的,写法用的原生写法
然后有个日期选择弹出框在微信小程序模拟器上运行正常,但发布后日期选择框有遮盖问题
这里说一句canvas必须设置高宽,而且高宽不能设置为百分比,本人差点直接栽在这里,(因为设置的什么都对也不报错就是出不来效果)
还有说一句这个写好会在微信开发者工具和真机测试中还是会出现问题,但上线体验版显示正常的,开发阶段可以将type="2d"去掉,这样应该就能正常显示了

解决这个问题标签上必须有canvas-id="自定义" id="自定义" type="2d"这三个属性
<canvas canvas-id="curveChart" id="curveChart" type="2d"></canvas>

		showLineA(canvasId,chartData){
			const query = uni.createSelectorQuery().in(this);
			query.select('#' + canvasId).fields({ node: true, size: true }).exec(res => {
				if (res[0]) {
				  const canvas = res[0].node;
				  console.log(canvas,'--------canvas画布',res);
				  // canvas.getContext('2d')这个是为了在微信小程序获得canvas标签的方法,然后在浏览器上获取不到会报错,这样处理是让两者都可以正常显示(浏览器获得的方法uni.createCanvasContext(canvasId, _self))
				  const ctx = canvas ? canvas.getContext('2d'):uni.createCanvasContext(canvasId, _self);
				  if(canvas){
					canvas.width = res[0].width * this.pixelRatio;
					canvas.height = res[0].height * this.pixelRatio;
				  }
				  canvaContext[canvasId] = new uCharts({
					context: ctx,
                                        // 图表的配置参数
				  });
				}else{
				  console.error("[uCharts]: 未获取到 context");
				}
			});

		},
posted @ 2022-09-09 11:07  嗯哼Nymph  阅读(990)  评论(0编辑  收藏  举报