微信小程序开发canvas绘制坐标图教程

这里是微信小程序项目中用到的canvas绘制柱状图、线图、饼状图,跟html里的canvas略微差别,不做详细介绍,

1、线图

微信小程序开发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();
}

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

3、柱状图

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

 


【本站声明】
  1、本站文章中所选用的图片及文字来源于网络以及用户投稿,由于未联系到知识产权人或未发现有关知识产权的登记,如有知识产权人并不愿意我们使用,如果有侵权请立即联系。
  2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。


KESION 科汛软件

KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商,长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。

KESION 不断通过技术创新,提供产品和服务,助力企业向数字化转型,通过科技驱动商业革新,让商业变得更智慧!



▼点击进入科汛官网了解更多



上/下篇
换一换相关推荐
精选内容
热点精选