钉钉/支付宝小程序中当页面多个图表时,图标被缩小或者放大问题
image.png-
1.使用@antv/my-f2时解决方法:
在 setData 的回调里绘制图表:
this.setData({
width: canvasWidth * pixelRatio,
height: canvasHeight * pixelRatio
}, () => {
if (res && res[0]) {
const context = my.createCanvasContext('canvasId'); // "radar" 替换自己定义的 canvas 的 id
context.scale(pixelRatio, pixelRatio); // 必要!按照设置的分辨率进行放大
const canvas = new F2.Renderer(context);
drawChart(canvas, res[0].width, res[0].height);
}
});
不论是钉钉小程序还是支付宝小程序同理。
-
2.使用@antv/f2时同道理
context.scale(pixelRatio, pixelRatio); // 必要!按照设置的分辨率进行放大
可以在创建时设置:
const chart = new F2.Chart({
context: context,
// el: canvas,
pixelRatio: pixelRatio, // 指定分辨率
width: canvasWidth,
height: canvasHeight,
});
注意,两者选其一即可。
网友评论