美文网首页
使用antv/f2 或antv/my-f2时,页面多个图表展示问

使用antv/f2 或antv/my-f2时,页面多个图表展示问

作者: 一懒众衫小小小小 | 来源:发表于2020-04-08 19:16 被阅读0次

钉钉/支付宝小程序中当页面多个图表时,图标被缩小或者放大问题

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,
      });

注意,两者选其一即可。

相关文章

网友评论

      本文标题:使用antv/f2 或antv/my-f2时,页面多个图表展示问

      本文链接:https://www.haomeiwen.com/subject/lbhxmhtx.html