用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实用组件/插件 查看内容

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

天下雪 2017-1-24 00:16

作者:啃先生,来自授权地址用法:let Line = require('../../utils/line.js');let line = new Line();line.draw({ renderTo: 'lineCanvas', series: data, //data 数据结构见下文 pagePadding: 12, //页面左右paddi ...

作者:啃先生,来自授权地址 
用法:

  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. // data的数据结构, data是一个数组,一个元素代表一个点,点击时这个点的数据会通过事件对象的 serie 属性传给回调函数。
  11. // 所以调用者可以根据自己业务的需要添加信息,但有些字段是必须的:
  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. })
  1. //data的数据结构
  2. [
  3. {
  4. tag:"吃喝",
  5. value: 98
  6. ... // 调用者根据业务需要添加任意字段
  7. }
  8. ...
  9. ]

DEMO & 示意图 
体验DEMO扫描进小程序 --> 天天随手记账 --> 记一笔账-->回到首页点左下角图标。进入统计页面即看到效果

此外,我还开源了些小程序的前后端源码,你可以在那里看到我是怎么调用的 

Github 地址:https://github.com/kenshinlin/wechat-chart 
文件下载:wechat-chart-master.zip

示意图:

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
来自: 授权地址

相关阅读