如何在小程序中绘制图表？
文 | musiq1989
由于微信小程序本身框架的限制，很难集成目前已有的图表工具，显示图表目前有两种方案：
- 服务器端渲染图表，输出图片，微信小程序中直接显示渲染好的图片；
- 利用微信小程序 API 中提供的
canvas组件支持，自行绘制图表。
前一种方案已经有非常多类似服务可选，比如 Highcharts 提供了服务端渲染的能力。但这种方式需要后台有一套渲染服务，并且有一定的网络开销。
那么，如何利用 canvas 组件，在小程序中绘制图表呢？下面，我们就来看尝试一下。
API
首先，我们在模板文件中使用 <canvas></canvas> 声明一个 canvas 组件，再使用 wx.createContext() 获取绘图上下文 context。
接下来，我们调用 wx.drawCanvas() 进行绘制：
开始图表的绘制
绘制折线图
需要注意的是，moveTo() 方法不会记录到路径中。
我们来看看效果图：
好像没有想象中难，看上去效果还不错。
绘制每个数据点的标识图案
效果图：
为了避免之前绘制的折线路径影响到标识图案的路径，这一部分包裹在了 beginPath() 和 closePath() 之间。
绘制横坐标
我们规定的参数格式是这样的：
我们根据参数中的 categories 来绘制横坐标。先稍微整理下思路：
- 根据
categories数均分画布宽度； - 计算出横坐标中每个分类的起始点；
- 绘制文案（这儿会多一些代码，后面会具体提到）。
效果图：
效果不错，除了文字没有居中.......
查阅微信小程序官方提供的文档，小程序并没有提供 HTML 5 canvas 中的 mesureText（获取文案宽度）的方法。
下面是我们自己简单的实现，并不是绝对精确，但误差基本可以忽略。
这里分别处理了字母、数字、点（.）、横线（-）以及汉字这几个常用字符。
上面的代码稍微修改下：
大功告成！
如何在折线上绘制出每个数据点的数值文案呢？大家可以自己动手，尝试一下。
原文地址： https://segmentfault.com/a/1190000007649376
项目地址： https://github.com/xiaolin3303/wx-charts
本文由知晓程序授权转载，关注微信号 zxcx0101，回复「1228」获得全网第一本《小程序入门指南》电子书。
优质内容筛选与推荐>>1、struts2-2-用户自定义action的3种方法
2、docker--Dockerfile--java
3、我们的未来在哪里？
4、java.lang.ThreadGroup.enumerate
5、一键部署MongoDB集群Windows版