微信小程序中图表现状
由于微信小程序本身框架的限制,很难集成目前已有的图表工具,显示图表目前有两种方案:
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