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

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

相关文章

来自专栏欧阳大哥的轮子

iOS界面布局的核心以及TangramKit介绍

TangramKit是iOS系统下用Swift编写的第三方界面布局框架。他集成了iOS的AutoLayout和SizeClass以及Android的五大容器布局...

853
来自专栏一“技”之长

AppleWatch开发入门二——界面布局 原

        在iphone开发中,最基本的布局方式是通过frame,将控件的位置和大小固定在屏幕上,后来,由于手机屏幕的尺寸有了略微变化,有了autores...

782
来自专栏大壮

iOS 动画(理论篇)

1405
来自专栏一“技”之长

iOS动画开发之一——UIViewAnimation动画的使用

      一款APP的成功与否,除了完善的功能外,用户体验也占有极大的比重,动画的合理运用,可以很好的增强用户体验。iOS开发中,常用的动画处理有UIView...

953
来自专栏腾讯IVWEB团队的专栏

SVG 动画精髓(下)

线条动画 SVG 中的线条动画常常用作过渡屏(splash screen)中。例如:一些比较炫酷的 LOGO 和 炫酷的效果,大家有没有动心想学一学,看看自己到...

2880
来自专栏菩提树下的杨过

[转自blueidea]像table一样布局div Ⅰ

翻译自:Equal height boxes with CSS 原文:http://www.456bereastreet.com/archive/200405...

1867
来自专栏前端黑板报

throttle与debounce的区别

注:文章中有例子无法在微信里面展示,最好看原文。 以前写过一篇文章《“节流函数”提高性能》,里面讲到用函数“节流”来减少执行次数(不影响体验的情况下),其实实现...

2635
来自专栏从零开始学 Web 前端

CSS相关知识点

4、如果给了定位,但是没有给left,top等值,默认会腾出行内元素、padding的位置,有的时候我们可以使用这些特性,有的时候我们不熟悉的话可能产生bug。

664
来自专栏web前端教室

[一对一课程] 之 设计并实现第一个JS模块?

这篇文章不太好写,谈目前网上的多数教程,谈到JS模块必贴代码,而我一向不喜欢在公众号文章里写代码,因为难以阅读。所以我尝试从“构思”的角度,来写一下本文。 在昨...

2038
来自专栏编程之旅

Rem布局的原理探究

在用前端给移动端页面写布局时,我接触到了Rem布局,但是老实说我也看了几篇手淘适配的文章,并且主要的目的是拿到代码写出demo,所以对于Rem我还是停留在只会使...

1182

扫码关注云+社区