如何在小程序中绘制图表？

文 | musiq1989

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

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

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

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

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

API

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

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

开始图表的绘制

绘制折线图

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

我们来看看效果图：

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

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

效果图：

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

绘制横坐标

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

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

1. 根据 categories 数均分画布宽度；

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

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

效果图：

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

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

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

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

上面的代码稍微修改下：

大功告成！

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

原文地址：
https://segmentfault.com/a/1190000007649376

项目地址：
https://github.com/xiaolin3303/wx-charts

本文由知晓程序授权转载，关注微信号 zxcx0101，回复「1228」获得全网第一本《小程序入门指南》电子书。