258资源分享网

这里是微信小程序项目中用到的canvas绘制柱状图、线图、饼状图，跟html里的canvas略微差别，不做详细介绍，仅做个记录防失忆啊，

1、线图

function draw(data, ctx) { var width, height = 300, ratioX, ratioY, maxY, stepY; var newArr = new Array(); //-------- 数据处理 ----------- if (data.time == null) { return; } if (data.type == 'day' || data.type == 'month') { var timeList = new Array(); 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(); }

2、饼图

function draw(data, ctx) { var start = 0,x,y = 140,r = 90,total=0, end,width; var ratio = new Array(); wx.getSystemInfo({ success: function (res) { width = res.windowWidth; } }); x = width / 2 - 15; for(var i=0;i<data.length;i++){ total += data[i].num; } for (var i = 0; i < data.length; i++) { ratio.push(data[i].num / total); } // -------- 绘制饼图 -------------------- for (var i = 0; i < data.length; i++) { end = start + Math.PI * 2 * ratio[i]; ctx.save(); ctx.translate(x, y); ctx.setFontSize("8"); ctx.setFillStyle(color[i]); ctx.setTextAlign("center"); ctx.setTextBaseline("middle"); ctx.fillText(data[i].name + ' ' + (ratio[i] * 100).toFixed(2) + '%', Math.cos((end+start)/2)* 120, Math.sin((end+start)/2)* 120); ctx.restore(); ctx.save(); ctx.beginPath(); ctx.setFillStyle(color[i]); ctx.moveTo(x, y); ctx.arc(x, y, r, start, end, false); ctx.fill(); ctx.restore(); start = end; } // -------- 饼心 --------------- ctx.save(); ctx.beginPath(); ctx.moveTo(x, y); ctx.arc(x, y, 50, 0, Math.PI * 2); ctx.setFillStyle("#ffffff"); ctx.fill(); ctx.restore(); ctx.draw(); }