欢迎光临,了解微信小程序开发,就上易用通! QQ登录

基于微信小程序 Canvas API 实现的柱状图和趋势图

发布:2018-01-25 09:58浏览:来源:网络 编辑:程小序

  1. let Line = require('../../utils/line.js');
  2. let line = new Line();
  3. line.draw({
  4.     renderTo: 'lineCanvas',
  5.     series: data, //data 数据结构见下文
  6.     pagePadding: 12, //页面左右padding的像素值
  7.     setCanvasSize: o=>this.setData({lineCtxHeight:o.height}),  //设置 canvas 的高度,至于宽度,当前是限制宽度只能占满屏幕,暂时没有提供接口
  8.     onTouch: e=>this.setData({ oneDayData: e.serie }) //点击事件,当点击趋势图时触发,e 是事件类(详见微信文档),e.serie 是当前点击处横坐标对应的对象,它是data的一个元素
  9. })
  10.  
  11. // data的数据结构, data是一个数组,一个元素代表一个点,点击时这个点的数据会通过事件对象的 serie 属性传给回调函数。
  12. // 所以调用者可以根据自己业务的需要添加信息,但有些字段是必须的:
  13.   {
  14.     value: 23,    //数字
  15.     txt: '02-08'  //比如是日期
  16.     ... // 调用者根据业务需要添加任意字段
  17.   }
  18.   ... 
  19. ]
  1. let Bar = require('../../utils/bar.js');
  2. let bar = new Bar();
  3. bar.draw({
  4.     renderTo:"tagRateCanvas",
  5.     series:data,
  6.     setCanvasSize: o=>this.setData({ctxHeight:o.height}),
  7.     onTouch:(e)=>{
  8.       let serie = e.serie
  9.       this.renderRecords(serie.items)
  10.     }
  11. })
  12.  
  13.  
  14. //data的数据结构
  15. [
  16.   {
  17.     tag:"吃喝",
  18.     value: 98
  19.     ... // 调用者根据业务需要添加任意字段
  20.   }
  21.   ...
  22. ]
DEMO & 示意图
  • 体验DEMO 扫描进小程序 --> 天天随手记账 --> 记一笔账-->回到首页点左下角图标。进入统计页面即看到效
示意图
 

源码下载:
wechat-chart-master.zip





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。

在线客服1:
点击这里给我发消息

在线客服2:
点击这里给我发消息

商务客服:
点击这里给我发消息

服务时间:
9:00-18:00(工作日)