参考链接：
（1）在微信小程序中绘制图表（part1）
/a/1190000007649376
（2）在微信小程序中绘制图表（part2）
/a/1190000007696536
（3）在微信小程序中绘制图表（part3）
/a/1190000007876976
（4）wx-charts 微信小程序图表插件
/xiaobai-y/p/9089157.html
思考：Ant Design的官方文档详细说明了Component中的chart是如何实现基于数据渲染的图表生成，那么微信小程序有没有类似的开发内容呢？
微信小程序中图表现状
由于微信小程序本身框架的限制，很难集成目前已有的图表工具，显示图表目前有两种方案：
1、服务器端渲染图表，输出图片，微信小程序中直接显示渲染好的图片，比如highcharts提供了服务端渲染的能力hightcharts server render，这种方式需要后台有一套渲染服务，并且有一定的网络开销。
2、微信小程序API中提供了canvas的支持，利用canvas自行绘制图表。
【GitHub参考】/xiaolin3303/wx-charts
API
1、查看微信小程序详细 Canvas API 文档
在模板文件中使用<canvas></canvas>声明一个canvas组件使用wx.createContext获取绘图上下文 context调用wx.drawCanvas进行绘制wx.drawCanvas({canvasId: 'firstCanvas',actions: context.getActions() // 获取绘图动作数组});
2、支持图标类型
饼图 pie圆环图 ring线图 line柱状图 column区域图 area雷达图 radar
如何使用canvas
1、直接引用编译好的文件 dist/charts.js（js下载地址/xiaolin3303/wx-charts/）
.wxml中定义
<canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas"></canvas>
注意：canvas-id与new wxCharts({canvasId:”})中canvasId一致
2、命令行
git clone /xiaolin3303/wx-charts.gitnpm install rollup -gnpm installrollup -c 或者 rollup --config rollup.config.prod.js
3、参数说明
optsObjectopts.canvasIdString required微信小程序canvas-idopts.width Number requiredcanvas宽度，单位为pxopts.height Number requiredcanvas高度，单位为pxopts.title Object (only for ring chart)opts.title.name String 标题内容opts.title.fontSizeNumber 标题字体大小（可选，单位为px）opts.title.color String 标题颜色（可选）opts.subtitleObject (only for ring chart)opts.subtitle.name String 副标题内容opts.subtitle.fontSize Number副标题字体大小（可选，单位为px）opts.subtitle.colorString副标题颜色（可选）opts.animationBoolean default true 是否动画展示opts.legend Boolen default true 是否显示图表下方各类别的标识opts.typeString required 图表类型，可选值为pie, line, column, area……opts.categories Array required (饼图、圆环图不需要) 数据类别分类opts.dataLabelBoolean default true是否在图表中显示数据内容值opts.dataPointShapeBoolean default true 是否在图表中显示数据点图形标识opts.xAxis Object X轴配置opts.xAxis.disableGrid Boolean default false不绘制X轴网格opts.yAxis Object Y轴配置opts.yAxis.format Function 自定义Y轴文案显示opts.yAxis.minNumber Y轴起始值opts.yAxis.maxNumber Y轴终止值opts.yAxis.title String Y轴titleopts.yAxis.disabledBoolean default false 不绘制Y轴opts.series Array required 数据列表
4、数据列表每项结构定义
dataItem ObjectdataItem.data Array required (饼图、圆环图为Number) 数据dataItem.colorString 例如#7cb5ec 不传入则使用系统默认配色方案dataItem.name String 数据名称dateItem.formatFunction 自定义显示数据内容
开始图表的绘制
（1）绘制折线图
// 获取绘图上下文 contextvar 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方法不记录到路径中
（2）绘制每个数据点的标识图案
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中
（3）绘制横坐标
规定我们的参数格式是这样的
opts = {width: 640, // 画布区域宽度height: 400, // 画布区域高度categories: ['-08', '-09', '-10', '-11', '-12', '']}
我们根据参数中的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();
（4）查看微信小程序官方提供的文档并没有提供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);});
