导航：首页 > 开发技术 >

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

发表于：2026-11-02 作者：千家信息网编辑

千家信息网最后更新 2026年11月02日，这篇文章主要为大家展示了"微信小程序开发中如何使用canvas绘制坐标图"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"微信小程序开发中如何使用canvas

千家信息网最后更新 2026年11月02日微信小程序开发中如何使用canvas绘制坐标图

这篇文章主要为大家展示了"微信小程序开发中如何使用canvas绘制坐标图"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"微信小程序开发中如何使用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;i3、柱状图
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();  }

以上是"微信小程序开发中如何使用canvas绘制坐标图"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！

很赞哦！