canvas画条形图 微信小程序_在微信小程序中绘制图表（part1）

微信小程序中图表现状

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

1、服务器端渲染图表，输出图片，微信小程序中直接显示渲染好的图片，比如highcharts提供了服务端渲染的能力hightcharts server render，这种方式需要后台有一套渲染服务，并且有一定的网络开销。

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

下面我们来看下怎么在微信小程序中绘制图表。

关注我的 github项目 查看完整代码。

API

查看微信小程序详细 Canvas API 文档

在模板文件中使用声明一个canvas组件

使用wx.createContext获取绘图上下文 context

调用wx.drawCanvas进行绘制

wx.drawCanvas({

canvasId: 'firstCanvas',

actions: context.getActions() // 获取绘图动作数组

});

开始图表的绘制

绘制折线图

// 获取绘图上下文 context

var context = wx.createContext();

// 设置描边颜色

context.setStrokeStyle("#7cb5ec");

// 设置线宽

context.setLineWidth(4);

context.moveTo(50, 70);

context.lineTo(150, 150);

context.lineTo(25