微信小程序图表chart

参考链接：
（1）在微信小程序中绘制图表（part1）
https://segmentfault.com/a/1190000007649376
（2）在微信小程序中绘制图表（part2）
https://segmentfault.com/a/1190000007696536
（3）在微信小程序中绘制图表（part3）
https://segmentfault.com/a/1190000007876976
（4）wx-charts 微信小程序图表插件
https://www.cnblogs.com/xiaobai-y/p/9089157.html

思考：Ant Design的官方文档详细说明了Component中的chart是如何实现基于数据渲染的图表生成，那么微信小程序有没有类似的开发内容呢？

微信小程序中图表现状

由于微信小程序本身框架的限制，很难集成目前已有的图表工具，显示图表目前有两种方案：
1、服务器端渲染图表，输出图片，微信小程序中直接显示渲染好的图片，比如highcharts提供了服务端渲染的能力hightcharts server render，这种方式需要后台有一套渲染服务，并且有一定的网络开销。
2、微信小程序API中提供了canvas的支持，利用canvas自行绘制图表。

【GitHub参考】https://github.com/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下载地址https://github.com/xiaolin3303/wx-charts/）
.wxml中定义

<canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas"></canvas>

注意：canvas-id与new wxCharts({canvasId:”})中canvasId一致

2、命令行

git clone github.com/xiaolin3303/wx-charts.git
npm install rollup -g
npm install
rollup -c 或者 rollup --config rollup.config.prod.js

3、参数说明

opts                         Object
opts.canvasId                String required                    微信小程序canvas-id
opts.width                   Number required                canvas宽度，单位为px
opts.height                  Number required                canvas高度，单位为px
opts.title                   Object           (only for ring chart)
opts.title.name              String           标题内容
opts.title.fontSize          Number            标题字体大小（可选，单位为px）
opts.title.color             String           标题颜色（可选）
opts.subtitle                Object         (only for ring chart)
opts.subtitle.name           String           副标题内容
opts.subtitle.fontSize       Number          副标题字体大小（可选，单位为px）
opts.subtitle.color          String          副标题颜色（可选）
opts.animation               Boolean default true         是否动画展示
opts.legend                  Boolen default true       是否显示图表下方各类别的标识
opts.type                    String required 图表类型，可选值为pie, line, column, area……
opts.categories              Array required       (饼图、圆环图不需要) 数据类别分类
opts.dataLabel               Boolean default true     是否在图表中显示数据内容值
opts.dataPointShape          Boolean default true   是否在图表中显示数据点图形标识
opts.xAxis                   Object       X轴配置
opts.xAxis.disableGrid       Boolean default false      不绘制X轴网格
opts.yAxis                   Object    Y轴配置
opts.yAxis.format            Function           自定义Y轴文案显示
opts.yAxis.min               Number        Y轴起始值
opts.yAxis.max               Number           Y轴终止值
opts.yAxis.title             String       Y轴title
opts.yAxis.disabled          Boolean default false        不绘制Y轴
opts.series                  Array required        数据列表

4、数据列表每项结构定义

dataItem                      Object
dataItem.data                 Array required (饼图、圆环图为Number) 数据
dataItem.color                String 例如#7cb5ec 不传入则使用系统默认配色方案
dataItem.name                 String 数据名称
dateItem.format               Function 自定义显示数据内容

开始图表的绘制

（1）绘制折线图

// 获取绘图上下文 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方法不记录到路径中

（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: ['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();

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