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

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

相关文章

来自专栏james大数据架构

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

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

2096
来自专栏听雨堂

label自定义的惨痛教训

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

2126
来自专栏练小习的专栏

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

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

2209
来自专栏数据结构笔记

Django搭建博客(二):博客的布局

黄色的方框里是我博客的名字,也相当于是一个 logo吧,绿色的部分我计划每小时随机显示一条名言(或者鸡汤?)

1952
来自专栏IMWeb前端团队

mXSS简述

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

2215
来自专栏数据小魔方

自定义下拉菜单

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

3396
来自专栏腾讯NEXT学位

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

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

4.9K4
来自专栏全栈工程师成长之路

iOS界面渲染流程分析

在最近的面试中,我发现一道面试题,其考点是:围绕iOS App中一个视图从添加到完全渲染,在这个过程中,iOS系统都做了什么?

1971
来自专栏DeveWork

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

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

20510
来自专栏Material Design组件

Material Design —卡片(Cards)

39310

扫码关注云+社区

领取腾讯云代金券