zoukankan      html  css  js  c++  java
  • 微信小程序canvas绘制坐标图

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

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

    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();
      }
    码农随笔防失忆,只为记录风雨路上的脚丫印印~
  • 相关阅读:
    A1020 Tree Traversals [中序后序建树]
    bfs 找步数最少的迷宫路径
    hdu 1241
    hdu 素数环
    A1054 The Dominant Color [map]
    A1097 Deduplication on a Linked List [链表去重]
    C# 中Dictionary的用法及用途
    C#文件操作
    C# 属性概述
    C# Lock的用法
  • 原文地址:https://www.cnblogs.com/bella-lin/p/8023627.html
Copyright © 2011-2022 走看看