微信小程序开发中如何使用canvas绘制坐标图

线图

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();}

饼图

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();}

柱状图

function draw(data, ctx) {  var width,height = 260;  var newArr = new Array();  wx.getSystemInfo({success: function (res) {      width = res.windowWidth;    }  })  var ratioX = (width - 55) / data.length;  var ratioY = parseInt((height - 45) / 5);  //求NUM的最大值  for (var i = 0; i < data.length; i++) {    newArr.push(data[i].num);  }  var maxY = Math.max.apply(Math, newArr);  var 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.moveTo(15, 215 - i * ratioY);    ctx.lineTo(380, 215 - i * ratioY);    ctx.fillText(i * stepY, 0, 220 - i * ratioY);    ctx.stroke();    ctx.restore();  }