微信小顺序中图表近况
因为微信小顺序自身框架的限定，很难集成现在已有的图表东西，显现图表现在有两种计划：
1、效劳器端衬着图表，输出图片，微信小顺序中直接显现衬着好的图片，比方highcharts供应了效劳端衬着的才能hightcharts server render，这类体式格局须要背景有一套衬着效劳，并且有肯定的收集开支。
2、微信小顺序API中供应了canvas的支撑，应用canvas自行绘制图表。
下面我们来看下怎样在微信小顺序中绘制图表。
关注我的 github项目 检察完全代码。
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来绘制横坐标
轻微整顿下思绪：
1、依据categories数均分画布宽度
2、盘算出横坐标中每一个分类的起始点
3、绘制案牍（这儿会多一些代码，后面会详细提到）
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;
}这里离别处理了字母, 数字, ., -, 汉字这几个经常使用字符
上面的代码轻微修改下：
opts.categories.forEach(function(item, index) {
var offset = eachSpacing / 2 - mesureText(item) / 2;
context.fillText(item, points[index] + offset, startY + 28);
});
功德圆满！
如安在折线上绘制出每一个数据点的数值案牍人人能够着手本身完成下
预报：下一部份我们一同议论怎样依据实在的数据绘制折线以及假如肯定纵坐标的局限和纵坐标分区的题目。
