![611cddfab9101a65e26987071dbad5eb.png](https://i-blog.csdnimg.cn/blog_migrate/5fcfb2b2477687657533434b365fb058.jpeg)
由于微信小程序本身框架的限制,很难集成目前已有的图表工具,显示图表目前有两种方案:
- 服务器端渲染图表,输出图片,微信小程序中直接显示渲染好的图片;
- 利用微信小程序 API 中提供的 canvas 组件支持,自行绘制图表。
前一种方案已经有非常多类似服务可选,比如 Highcharts 提供了服务端渲染的能力。但这种方式需要后台有一套渲染服务,并且有一定的网络开销。
那么,如何利用 canvas 组件,在小程序中绘制图表呢?下面,我们就来看尝试一下。
API
首先,我们在模板文件中使用 声明一个 canvas 组件,再使用 wx.createContext() 获取绘图上下文 context。
接下来,我们调用 wx.drawCanvas() 进行绘制:
![2941805f67d196c559d2099a733ed7be.png](https://i-blog.csdnimg.cn/blog_migrate/6b640d82e8630a14181c9ee122796e5d.jpeg)
开始图表的绘制
绘制折线图
![39f5d0c74d3a078ec25f2473cce61a9b.png](https://i-blog.csdnimg.cn/blog_migrate/3d5a1d29e06949863ce12c669928e5db.jpeg)
需要注意的是,moveTo() 方法不会记录到路径中。
我们来看看效果图:
![92de051a297bae9cc5ca9a1066ec4620.png](https://i-blog.csdnimg.cn/blog_migrate/52b1919855196dff88c5bc42d5571625.jpeg)
好像没有想象中难,看上去效果还不错。
绘制每个数据点的标识图案
![43cfcebc110428240baca0cada2bebc4.png](https://i-blog.csdnimg.cn/blog_migrate/b9c157bab897a5402612216b6c0c87b1.jpeg)
效果图:
![250180d0611e6baddbb787f978faab21.png](https://i-blog.csdnimg.cn/blog_migrate/8d09020cae12fff4252567bbd117bc06.jpeg)
为了避免之前绘制的折线路径影响到标识图案的路径,这一部分包裹在了 beginPath() 和 closePath() 之间。
绘制横坐标
我们规定的参数格式是这样的:
![9788d1eec4118c461af4775b22592ce9.png](https://i-blog.csdnimg.cn/blog_migrate/bf12936bffdfc46426a05429194dc991.jpeg)
我们根据参数中的 categories 来绘制横坐标。先稍微整理下思路:
- 根据 categories 数均分画布宽度;
- 计算出横坐标中每个分类的起始点;
- 绘制文案(这儿会多一些代码,后面会具体提到)。
![187a25981afe8d81fc9d4348713a2070.png](https://i-blog.csdnimg.cn/blog_migrate/39a860a6ee8d126b66bce46305b7e0b9.jpeg)
效果图:
![996df467d419fbfd283b0de0a9928f38.png](https://i-blog.csdnimg.cn/blog_migrate/04a8aee847037456459895e402286df3.jpeg)
效果不错,除了文字没有居中.......
查阅微信小程序官方提供的文档,小程序并没有提供 HTML 5 canvas 中的 mesureText(获取文案宽度)的方法。
下面是我们自己简单的实现,并不是绝对精确,但误差基本可以忽略。
![13af26e27246743064baad87470ad77e.png](https://i-blog.csdnimg.cn/blog_migrate/1fe6d6e1559939504e4688b3e5beda7b.jpeg)
这里分别处理了字母、数字、点(.)、横线(-)以及汉字这几个常用字符。
上面的代码稍微修改下:
![2d4c5bb1969db386d0578f5a8da691a4.png](https://i-blog.csdnimg.cn/blog_migrate/e8cc5e8781ab11bbf6314e5001a515f0.jpeg)
![481d976ae16d9138c8a165066d406726.png](https://i-blog.csdnimg.cn/blog_migrate/f60e74c6e951811d1467660ab5b5e527.jpeg)
大功告成!
如何在折线上绘制出每个数据点的数值文案呢?大家可以自己动手,尝试一下。