由于微信小程序本身框架的限制，很难集成目前已有的图表工具，显示图表目前有两种方案：

  服务器端渲染图表，输出图片，微信小程序中直接显示渲染好的图片；

  利用微信小程序API中提供的canvas组件支持，自行绘制图表。

  前一种方案已经有非常多类似服务可选，比如Highcharts提供了服务端渲染的能力。但这种方式需要后台有一套渲染服务，并且有一定的网络开销。

  那么，如何利用canvas组件，在小程序中绘制图表呢？下面，我们就来看尝试一下。

  API

  首先，我们在模板文件中使用<canvas></canvas>声明一个canvas组件，再使用wx.createContext()获取绘图上下文context。

  接下来，我们调用wx.drawCanvas()进行绘制：

  开始图表的绘制

  绘制折线图

  需要注意的是，moveTo()方法不会记录到路径中。

  我们来看看效果图：

  好像没有想象中难，看上去效果还不错。

  绘制每个数据点的标识图案

  效果图：

  为了避免之前绘制的折线路径影响到标识图案的路径，这一部分包裹在了beginPath()和closePath()之间。

  绘制横坐标

  我们规定的参数格式是这样的：

  我们根据参数中的categories来绘制横坐标。先稍微整理下思路：

  根据categories数均分画布宽度；

  计算出横坐标中每个分类的起始点；

  绘制文案（这儿会多一些代码，后面会具体提到）。

  效果图：

  效果不错，除了文字没有居中.......

  查阅微信小程序官方提供的文档，小程序并没有提供HTML5canvas中的mesureText（获取文案宽度）的方法。

  下面是我们自己简单的实现，并不是绝对精确，但误差基本可以忽略。

  这里分别处理了字母、数字、点（.）、横线（-）以及汉字这几个常用字符。

  上面的代码稍微修改下：

  大功告成！

  如何在折线上绘制出每个数据点的数值文案呢？大家可以自己动手，尝试一下。