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

OBKoro1 发布于2019-08-20 13:54 / 3217人阅读

摘要：所以调用者可以根据自己业务的需要添加信息，但有些字段是必须的数字比如是日期调用者根据业务需要添加任意字段的数据结构吃喝调用者根据业务需要添加任意字段示意图体验扫描进小程序天天随手记账记一笔账回到首页点左下角图标。

wechat-chart

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

GitHub 地址

用法

let Line = require("../../utils/line.js");
let line = new Line();
line.draw({
    renderTo: "lineCanvas",
    series: data, //data 数据结构见下文
    pagePadding: 12, //页面左右padding的像素值
    setCanvasSize: o=>this.setData({lineCtxHeight:o.height}),  //设置 canvas 的高度，至于宽度，当前是限制宽度只能占满屏幕，暂时没有提供接口
    onTouch: e=>this.setData({ oneDayData: e.serie }) //点击事件，当点击趋势图时触发，e 是事件类（详见微信文档），e.serie 是当前点击处横坐标对应的对象，它是data的一个元素
})

// data的数据结构, data是一个数组，一个元素代表一个点，点击时这个点的数据会通过事件对象的 serie 属性传给回调函数。
// 所以调用者可以根据自己业务的需要添加信息，但有些字段是必须的：
[ 
  {
    value: 23,    //数字
    txt: "02-08"  //比如是日期
    ... // 调用者根据业务需要添加任意字段
  }
  ... 
]

let Bar = require("../../utils/bar.js");
let bar = new Bar();
bar.draw({
    renderTo:"tagRateCanvas",
    series:data,
    setCanvasSize: o=>this.setData({ctxHeight:o.height}),
    onTouch:(e)=>{
      let serie = e.serie
      this.renderRecords(serie.items)
    }
})


//data的数据结构
[
  {
    tag:"吃喝",
    value: 98
    ... // 调用者根据业务需要添加任意字段
  }
  ...
]

DEMO & 示意图

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

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

示意图

关于我的信息可以来关注我的公众号，我在那里记录

服务器托管云服务器微信小程序技术实现微信小程序api接口柱状图在java实现微信小程序的功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81302.html

echarts拆线图和柱状图叠加，双Y轴，动画延时

摘要：需求制作叠加的拆线图，柱状图，双轴工具代码交易日柱状图动画延迟成交价昨收价成交额成交价元成交额万元成交价昨收价成交额效果图关键说明中可以叠加多组数据，要指定中的第二个轴中的表示的位置，表示在最大值处，默认在值一端表示数值序列是否倒置。需求制作叠加的拆线图，柱状图，双Y轴工具 echarts 代码 var xAxisData = []; var data1 = []; var da...

LeexMuller 2019-08-23 10:52 评论0 收藏0
微信小程序基于wepy使用canvas简单的画波柱状图

摘要：参考了这里只是给自己简单的记录下代码发现很多变量不知道咋称呼它意会意会全局定义一个轴数据源是轴的刻度数量刻度线参考了 https://www.cnblogs.com/yxysu...这里只是给自己简单的记录下代码发现很多变量不知道咋称呼它 - - 意会意会全局定义一个 const cx = wepy.createCanvasContext(chart) drawChart...

starsfun 2019-08-22 15:50 评论0 收藏0
[开源] SpriteJS -- 一款简单的跨终端 canvas 绘图框架

摘要：是一款由奇舞团开源的跨终端绘图框架，可以基于快速绘制结构化动画和交互效果，并发布到任何拥有环境的平台上比如浏览器小程序和。有如下特点基于绘制的文档对象模型四种基本精灵类型支持基础和高级的精灵属性，精灵盒模型属性与具有高度一致性。 SpriteJS 是一款由360奇舞团开源的跨终端 canvas 绘图框架，可以基于 canvas 快速绘制结构化 UI、动画和交互效果，并发布到任何拥有ca...

Achilles 2019-08-22 18:08 评论0 收藏0
[开源] SpriteJS -- 一款简单的跨终端 canvas 绘图框架

摘要：是一款由奇舞团开源的跨终端绘图框架，可以基于快速绘制结构化动画和交互效果，并发布到任何拥有环境的平台上比如浏览器小程序和。有如下特点基于绘制的文档对象模型四种基本精灵类型支持基础和高级的精灵属性，精灵盒模型属性与具有高度一致性。 SpriteJS 是一款由360奇舞团开源的跨终端 canvas 绘图框架，可以基于 canvas 快速绘制结构化 UI、动画和交互效果，并发布到任何拥有ca...

hover_lew 2019-08-30 15:53 评论0 收藏0