小程序-小程序图表库(F2图表库)

本文介绍了小程序图表库的选择,重点讨论了f2和mini-chart的区别,推荐在一般情况下使用mini-chart。同时,展示了如何在钉钉小程序中使用antv的F2库进行图表刷新。F2提供了丰富的图表类型,如pie饼图,并提供了详细的API和文档支持。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

小程序图表库

  • f2
    F2 的支付宝小程序版本(待支付宝支持自定义组件后,会基于此库提供一个支付宝小程序的组件)。
    github:https://github.com/antvis/my-f2

  • mini-chart
    支付宝小程序图表库mini-chart
    和上面小程序版本不同之处在于,my-f2是用f2的方式较为自定义底层地绘制,而mini-chart是封装成了自定义组件的形式,在使用上要简单些。
    github:https://github.com/ant-mini-program/mini-chart

    npm:https://developer.aliyun.com/mirror/npm/package/mini-chart

总结: 一般使用,我们使用mini-chart即可。

pie 饼图

官网参考:
github:https://github.com/ant-mini-program/mini-chart
https://developer.aliyun.com/mirror/npm/package/mini-chart

钉钉小程序图表刷新 antv-f2

官网:https://antv-f2.gitee.io/zh/docs/tutorial/manual/miniprogram
原文链接:https://blog.youkuaiyun.com/hthereal/java/article/details/103833182

公司有项目拟在钉钉小程序中实现部分功能,其中需要图表展示,经过与echart的比较,最终选择了阿里系的 F2,f2宣传的是“专注于移动,兼容多种环境(Node, 小程序,Weex)”,且有相关支持的文档,没有看到echart对阿里系的小程序支撑。

在钉钉小程序项目目录下,执行如下命令,引入 my-f2

npm install @antv/my-f2

或者 直接引用f2的插件,按官网来,官网已插件引入(F2 的支付宝小程序版本,支持原生 F2 的所有功能,欢迎使用反馈。)
参考官网:https://github.com/antvis/my-f2/blob/master/README.md

F2基础

官网:https://f2.antv.vision/zh/docs/api/f2

当引入 F2 之后,就可以使用全局命名空间 F2。

F2.version // 当前 F2 的版本号

类 Classes
F2.Chart:图表的入口类
F2.G:底层绘图引擎(基于原生的 Html5 Canvas 接口封装)
F2.Shape:F2 Shape 图形扩展接口,用于自定义各种几何标记的 shape
F2.Global:F2 的全局配置,包含图表的皮肤样式
F2.Util:辅助类工具函数

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

西京刀客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值