小程序－Canvas绘制折线图

小程序－Canvas绘制折线图

自己在一个小程序项目中，希望通过绘制折线图展示不同时间的数值变化趋势，搜索了一番后没找到特别好的第三方库，故打算自己实现一个简单的绘制折线图方法，本文记录自己如何在小程序中通过canvas绘制折线图。

目标

最终目标是达到官方小程序数据助手中折线图的效果：

除了UI目标外，还要便于在小程序其他地方使用或者在其他小程序中使用，所以API要有适当的通用性。

实现

实现的思路是在页面上放置指定大小的canvas，然后调用API传递’canvas id’与配置选项完成绘制，配置选项主要用来指定绘制数据、有关颜色、绘制大小等，绘制的API可以封装到一个单独的模块中便于公用。

接口

暂时设计了4个接口：init、draw、showLine、hideLine，分别用来初始化、绘制、显示和隐藏某条线，具体API描述如下所示：

• init(ctx: string|CanvasContext, options: object): LineChart

init，返回一个LineChart实例，可以调用LineChart原型上的三个方法，其中：

• ctx: 'canvas id’或通过wx.createCanvasContext得到的CanvasContext对象
• options:

{
    width: