最近公司接了一个跑步类的小程序,其中有一个功能需求是画一个用户跑步数据展示为柱形图,开始以为很简单,就是过去的拿来主义,在网上没有类似的图,也没找到类似的代码。那只能自己研究,整整花了3天时间。最终得以解决,分享出来供大家参考。
要点介绍:
1.柱形图顶部是圆形,或者说半圆形
2.文字显示在柱形上
3.文字方向跟柱形底部对齐
4.柱形下面显示日期
5.柱形背景颜色
6.柱形图需要可以左右滚动
制作需要哪些组件:
1.在开发工具中新建一个小程序组件
2.使用canvas 的 arc(), fillRect(), context.translate(0, startPoint.y); context.rotate(90 * Math.PI / 180); /***旋转90度 */
注意事项:
1.理解路径开始与路径结束等使用,不然画出来的图肯定出乎你的意料
小程序开发找我, 我的微信18910276806
如果你觉得本文章节省了你的开发时间,让你少加班,让你能更早的回家陪女友或者打游戏,能让你更快速的挣到钱,那么请支持我1元钱!如需获得更多有效帮助请加我微信18910276806,如未及时通过系我工作繁忙,敬请谅解。
技术开发QQ:287568970
技术开发微信:18910276806