canvas画条形图 微信小程序_微信小程序canvas绘制坐标图
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) {
width=res.windowWidth;
}
})
ratioX= parseInt((width - 60) / (data.time.length - 1));
ratioY= parseInt((height - 45) / 6);//求value的最大值
for (var i = 0; i < data.list.length; i++) {
newArr.push(Math.max.apply(Math, data.list[i].value));
}
maxY=Math.max.apply(Math, newArr);
stepY= Math.ceil(maxY / 4);//------- 绘制坐标线 ------
ctx.beginPath();for (var i = 0; i < 5; i++) {
ctx.save();
ctx.setStrokeStyle("#dde2e3");
ctx.setFillStyle("#848198");
ctx.setFontSize('8');
ctx.fillText(i* stepY, 0, 220 - i *ratioY);
ctx.moveTo(22, 215 - i *ratioY);
ctx.lineTo((width- 30), 215 - i *ratioY);
ctx.stroke();
ctx.restore();
}//--------- 绘制图例 ------------
for (var i = 0; i < data.list.length; i++) {
ctx.save();
ctx.translate(15, 215);
ctx.beginPath();
ctx.setStrokeStyle(color[i]);
ctx.setLineCap("round");
ctx.setLineWidth(10);
ctx.moveTo(22 + i * 38, 46);
ctx.lineTo(38 + i * 38, 46);
ctx.stroke();
ctx.setFontSize('8');
ctx.setFillStyle("#000000");
ctx.fillText(data.list[i].title,21 + i * 38, 66);
ctx.restore();
}//------ 绘制横坐标 ------
for (var i = 0; i < data.time.length; i++) {
ctx.save();
ctx.translate(15, 215);
ctx.setFontSize('8');
ctx.setFillStyle('#848198');
ctx.fillText(data.time[i], i* (ratioX), 20);
ctx.restore();
}//------ 绘制折线 ---------
for (var i = 0; i < data.list.length; i++) {
ctx.beginPath();
ctx.save();
ctx.translate(22, 215);
ctx.setStrokeStyle(color[i]);
ctx.moveTo(0, -data.list[i].value[0] / (stepY /ratioY));//console.log(data.list[i].value);
for (var j = 0; j < data.list[i].value.length; j++) {
ctx.lineTo(j* (parseFloat((width - 53) / (data.list[i].value.length - 1))), -(data.list[i].value[j] / (stepY /ratioY)));
ctx.stroke();
}
ctx.restore();
}
ctx.draw();
}