canvas画条形图 微信小程序_微信小程序canvas绘制坐标图

本文介绍了如何在微信小程序中使用canvas API绘制条形图和坐标图。首先,对后台返回的数据进行处理,然后获取屏幕宽度以计算坐标比例。接着,绘制坐标线、图例、横坐标,并通过循环遍历数据,动态绘制折线图。最后调用ctx.draw()更新画面。
摘要由CSDN通过智能技术生成

functiondraw(data, ctx) {var width, height = 300, ratioX, ratioY, maxY, stepY;var newArr = newArray();//-------- 数据处理 -----------

if (data.time == null) {return;

}if (data.type == 'day' || data.type == 'month') {var timeList = newArray();for (var i = 0; i < data.time.length; i++) {if ((i % 4 == 0 && data.type == 'day') || (i % 5 == 0 && data.type == 'month')) {

timeList.push(data.time[i].substr(data.time[i].length- 5, 5));

}

}

data.time=timeList;

}else{for (var i = 0; i < data.time.length; i++) {

data.time[i]= data.time[i].substr(data.time[i].length - 5, 5);

}

}//这里是后台返回的数据,处理后展示在页面//---------- 获取屏宽 ---------------

wx.getSystemInfo({

success:function(res) {

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值