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

文 | musiq1989

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

  1. 服务器端渲染图表,输出图片,微信小程序中直接显示渲染好的图片;
  2. 利用微信小程序 API 中提供的 canvas 组件支持,自行绘制图表。

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

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

API

首先,我们在模板文件中使用 <canvas></canvas> 声明一个 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」获得全网第一本《小程序入门指南》电子书。

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-02-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

自定义下拉菜单

今天跟大家分享怎么利用excel的数据有效和开发工具制作自定义下拉菜单! 下拉菜单是我们经常会用到的高效录入数据方式,可以减少我们录入大量数据时的繁琐过程。 本...

3146
来自专栏CDA数据分析师

一看就会又超级实用的Excel10大技巧

本期责编:Sophie 普通人需要用到的Excel的功能不到其全部功能的10%。也就是说,对于绝大部分的用户来说,只要掌握了几个必须懂的Excel表格的基本操作...

1908
来自专栏DeveWork

WordPress文章版权保护:复制文字自动添加版权信息

这年头,个人博客抄袭成风;某些博主非常不厚道,常常是原封不动地拿过去,不署名来源是常事,还有更可恨的是说成自己的。本站DeveWork.com 为了不必要的纠纷...

19710
来自专栏我的博客

Eclipse设置背景色和字体大小

一、设置Eclipse代码编辑背景色(保护自己从这里开始) 1、打开window / Preference,弹出Preference面板 2、展开Genera...

3508
来自专栏DeveWork

WordPress自定义栏目运用实例 VI:设置外链缩略图/特色图像

这里是WordPress 自定义栏目运用实例系列第五讲,为大家带来设置外链缩略图/特色图像的方法。如果你的主题支持特色图像的话,你会发现使用特色图像的图像是不能...

2459
来自专栏听雨堂

label自定义的惨痛教训

修改label文字: source.DefaultLabelProperties.Style.Font.Size=9; 修改文字的位置: source.Defa...

2046
来自专栏腾讯NEXT学位

Cocos Creator制作一个微信小游戏(上)

| 导语 微信小游戏都火成这样了,为什么不尝试一下? 我们的目标是使用Cocos Creator从零开始制作一个小游戏,并放到微信上玩。

2.7K3
来自专栏IMWeb前端团队

前端图片优化机制

60%的网站流量来自图片,图片优化可以大幅影响网站流量。 一、现有web图片格式 图片格式 支持透明 动画支持 压缩方式 浏览器支持 相对原图大小 适应场...

5430
来自专栏Material Design组件

Material Design —卡片(Cards)

37010
来自专栏Android群英传

记一次代码中毒急救

1092

扫码关注云+社区