推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：511
-
2020-04-04 浏览：505
-
2020-05-12 浏览：502
微信小程序不支持图表工具，通过实例带你了解绘制方案
发布时间:2020-12-06由于微信小程序本身框架的限制，很难集成目前已有的图表工具，显示图表目前有两种方案：
服务器端渲染图表，输出图片，微信小程序中直接显示渲染好的图片，比如Highcharts提供了服务端渲染的能力hightcharts server render，这种方式需要后台有一套渲染服务，并且有一定的网络开销。
微信小程序API中提供了canvas的支持，利用canvas自行绘制图表。
下面我们来看下怎么在微信小程序中绘制图表。
API查看微信小程序详细 Canvas API 文档。
在模板文件中使用<canvas></canvas>声明一个canvas组件。
使用wx.createContext获取绘图上下文 context。
调用wx.drawCanvas进行绘制。
wx.drawCanvas({ canvasId: 'firstCanvas', actions: context.getActions() // 获取绘图动作数组 }); 开始图表的绘制绘制折线图
// 获取绘图上下文 context var context = wx.createContext(); // 设置描边颜色 context.setStrokeStyle("#7cb5ec"); // 设置线宽 context.setLineWidth(4); context.moveTo(50, 70); context.lineTo(150, 150); context.lineTo(250, 30); context.lineTo(350, 120); context.lineTo(450, 150); context.lineTo(550, 95); // 对当前路径进行描边 context.stroke(); wx.drawCanvas({ canvasId: 'testCanvas', actions: context.getActions() });说明：moveTo方法不记录到路径中
效果图：
好像没有想象中难，看上去效果还不错。
绘制每个数据点的标识图案
... context.beginPath(); // 设置描边颜色 context.setStrokeStyle("#ffffff"); // 设置填充颜色 context.setFillStyle("#7cb5ec"); context.moveTo(50 + 7, 70); // 绘制圆形区域 context.arc(50, 70, 8, 0, 2 * Math.PI, false); context.moveTo(150 + 7, 150); context.arc(150, 150, 8, 0, 2 * Math.PI, false); ... context.closePath(); // 填充路径 context.fill(); context.stroke();效果图：
说明：避免之前绘制的折线路径影响到标识图案的路径，这里包裹在了beginPath和closePath中。
绘制横坐标
规定我们的参数格式是这样的。
opts = { width: 640, // 画布区域宽度 height: 400, // 画布区域高度 categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'] }我们根据参数中的categories来绘制横坐标。
稍微整理下思路：
根据categories数均分画布宽度；
计算出横坐标中每个分类的起始点；
绘制文案（这儿会多一些代码，后面会具体提到）。
var eachSpacing = Math.floor(opts.width / opts.categories.length); var points = []; // 起始点x坐标 var startX = 0; // 起始点y坐标 var startY = opts.height - 30; // 终点x坐标 var endX = opts.width; // 终点y坐标 var endY = opts.height; // 计算每个分类的起始点x坐标 opts.categories.forEach(function(item, index) { points.push(startX + index * eachSpacing); }); points.push(endX); // 绘制横坐标 context.beginPath(); context.setStrokeStyle("#cccccc"); context.setLineWidth(1); // 绘制坐标轴横线 context.moveTo(startX, startY); context.lineTo(endX, startY); // 绘制坐标轴各区块竖线 points.forEach(function(item, index) { context.moveTo(item, startY); context.lineTo(item, endY); }); context.closePath(); context.stroke(); context.beginPath(); // 设置字体大小 context.setFontSize(20); // 设置字体填充颜色 context.setFillStyle('#666666'); opts.categories.forEach(function(item, index) { context.fillText(item, points[index], startY + 28); }); context.closePath(); context.stroke();效果图：
效果不错，除了文字没有居中……
查看微信小程序官方提供的文档并没有提供HTML5 Canvas中的mesureText（获取文案宽度）方法，下面我们自己简单的实现，并不是绝对精确，但是误差基本可以忽略。
function mesureText (text) { var text = text.split(''); var width = 0; text.forEach(function(item) { if (/[a-zA-Z]/.test(item)) { width += 14; } else if (/[0-9]/.test(item)) { width += 11; } else if (/\./.test(item)) { width += 5.4; } else if (/-/.test(item)) { width += 6.5; } else if (/[\u4e00-\u9fa5]/.test(item)) { width += 20; } }); return width; }这里分别处理了字母、数字、 .、 -、汉字这几个常用字符。
