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

文 | 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 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

前端图片优化机制

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

4830
来自专栏数据小魔方

自定义下拉菜单

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

2996
来自专栏练小习的专栏

伪类以及伪元素的一些使用小技巧

在浏览器版本越来越高的情况下,很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用...

1939
来自专栏Material Design组件

Material Design —卡片(Cards)

36010
来自专栏hightopo

基于 HTML5 的 WebGL 3D 智能楼宇监控系统

1713
来自专栏james大数据架构

创建支持多种屏幕尺寸的Android应用

Android涉及各种各样的支持不同屏幕尺寸和密度的设备。对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的用...

1896
来自专栏游戏杂谈

产品设计之动态字体大小

iOS的“设置” –> “显示与亮度” –> “文字大小”,可以修改默认的系统字体大小,当修改之后,系统自带的应用如信息等都会随之改变,手机QQ会随之发生变化:

943
来自专栏DeveWork

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

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

2289
来自专栏CDA数据分析师

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

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

1858
来自专栏IMWeb前端团队

mXSS简述

本文作者:IMWeb 杨文坚 原文出处:IMWeb社区 未经同意,禁止转载 因为没啥好讲,就说一下mXSS ABSTRACT 不论是服务器端或客...

2035

扫码关注云+社区