微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个。

wx-charts基于canvas绘制的微信小程序图表插件

支持图表类型

  • 饼图 pie
  • 线图 line
  • 柱状图 column
  • 区域图 area

高清显示

设置canvas的尺寸为2倍大小,然后缩小到50%,建议都进行这样的设置,图表本身绘制时是按照高清显示配置的,不然整体效果会偏大

  1. /* 例如设计图尺寸为320 x 300 */
  2. .canvas {
  3. width: 640px;
  4. height: 600px;
  5. transform: scale(0.5)
  6. }

wx-charts参数说明

opts Object

opts.canvasId String required 微信小程序canvas-id

opts.width Number required canvas宽度,单位为px

opts.height Number required canvas高度,单位为px

opts.type String required 图表类型,可选值为pie, line, column, area

opts.categories Array required (饼图不需要) 数据类别分类

opts.dataLabel Boolean default true 是否在图表中显示数据内容值

opts.yAxis Object Y轴配置

opts.yAxis.format Function 自定义Y轴文案显示

opts.yAxis.min Number Y轴起始值

opts.yAxis.title String Y轴title

opts.series Array required 数据列表

数据列表每项结构定义

dataItem Object

dataItem.data Array required (饼图为Number) 数据

dataItem.color String 例如#7cb5ec 不传入则使用系统默认配色方案

dataItem.name String 数据名称

dateItem.format Function 自定义显示数据内容

wx-charts图表插件示例

饼图pie chart

  1. var Charts = require('charts.js');
  2. new Charts({
  3. canvasId: 'pieCanvas',
  4. type: 'pie',
  5. series: [{
  6. name: '成交量1',
  7. data: 15,
  8. }, {
  9. name: '成交量2',
  10. data: 35,
  11. }, {
  12. name: '成交量3',
  13. data: 78,
  14. }, {
  15. name: '成交量4',
  16. data: 63,
  17. }],
  18. width: 640,
  19. height: 400,
  20. dataLabel: false
  21. });

线图line chart

  1. new Charts({
  2. canvasId: 'lineCanvas',
  3. type: 'line',
  4. categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
  5. series: [{
  6. name: '成交量1',
  7. data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
  8. format: function (val) {
  9. return val.toFixed(2) + '万';
  10. }
  11. }, {
  12. name: '成交量2',
  13. data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
  14. format: function (val) {
  15. return val.toFixed(2) + '万';
  16. }
  17. }],
  18. yAxis: {
  19. title: '成交金额 (万元)',
  20. format: function (val) {
  21. return val.toFixed(2);
  22. },
  23. min: 0
  24. },
  25. width: 640,
  26. height: 400
  27. });

柱状图columnChart

  1. new Charts({
  2. canvasId: 'columnCanvas',
  3. type: 'column',
  4. categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
  5. series: [{
  6. name: '成交量1',
  7. data: [15, 20, 45, 37, 4, 80]
  8. }, {
  9. name: '成交量2',
  10. data: [70, 40, 65, 100, 34, 18]
  11. }, {
  12. name: '成交量3',
  13. data: [70, 40, 65, 100, 34, 18]
  14. }, {
  15. name: '成交量4',
  16. data: [70, 40, 65, 100, 34, 18]
  17. }],
  18. yAxis: {
  19. format: function (val) {
  20. return val + '万';
  21. }
  22. },
  23. width: 640,
  24. height: 400,
  25. dataLabel: false
  26. });

项目地址及下载:

https://github.com/xiaolin3303/wx-charts

本文链接:微信小程序图表插件(wx-charts)http://www.51xuediannao.com/xiaochengxu/wx-charts.html

微信小程序图表插件 - wx-charts的更多相关文章

  1. 【微信小程序】调用wx.request接口需要注意的问题

    写在前面 之前写了一篇<微信小程序实现各种特效实例>,上次的小程序的项目我负责大部分前端后台接口的对接,然后学长帮我改了一些问题.总的来说,收获了不少吧! 现在项目已经完成,还是要陆陆续续 ...

  2. 开发 | 微信小程序API-wx.setScreenBrightness/wx.getScreenBrightness

    前言 最近接触了微信小程序 API - wx.setScreenBrightness .wx.getScreenBrightness 接口,调用该接口可以调节并显示手机屏幕亮度数据.对于喜欢腾讯新闻. ...

  3. 关于微信小程序遇到的wx.request({})问题

    域名请求错误问题 当我们在编写小程序,要发送请求时,wx.request({})时或许会遇到如下的问题: 一:这是因为微信小程序的开发中,域名只能是https方式请求,所以我们必须在小程序微信公众平台 ...

  4. 微信小程序开发 [05] wx.request发送请求和妹纸图

    1.wx.request 微信小程序中用于发起网络请求的API就是wx.request了,具体的参数太多,此处就不再一一详举了,基本使用示例如下: wx.request({ url: 'test.ph ...

  5. 微信小程序web-view之wx.miniProgram.redirectTo

    17年微信小程序官方提供了web-view组件. 官方描述:web-view组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面.个人类型与海外类型的小程序暂不支持使用. 这段时间研究了一下小程 ...

  6. 微信小程序网络请求wx.request请求

    最近微信小程序开始开放测试了,小程序提供了很多api,极大的方便了开发者,其中网络请求api是wx.request(object),这是小程序与开发者的服务器实现数据交互的一个很重要的api. 百牛信 ...

  7. 一,前端---关于微信小程序遇到的wx.request({})问题

    域名请求错误问题 当我们在编写小程序,要发送请求时,wx.request({})时或许会遇到如下的问题: 一:这是因为微信小程序的开发中,域名只能是https方式请求,所以我们必须在小程序微信公众平台 ...

  8. 微信小程序:使用wx.request()请求后台接收不到参数

    问题描述: 微信小程序:wx.request()请求后台接收不到参数,我通过wx.request()使用POST方式调用请求,参数传递不到后台 解决方案: Content-Type': 'applic ...

  9. 微信小程序之使用wx:for遍历循环

    效果图如下: 实现代码如下:type.js: // pages/type/type.js Page({ /** * 页面的初始数据 */ data: { types: "" }, ...

随机推荐

  1. (转)UCOSII源代码剖析

    启动工作原理 刚接触操作系统的时候觉得这个最神秘,到底里面做了什么,怎么就成了个操作系统,它到底有什么用,为什么要引进来着个东东.学了之后才知道,原来最根本的思想还是源于汇编里面的跳转和压栈,以调用一 ...

  2. 数据结构(C语言版)-C语言和C++相关补充

    引用类型作形参的三点说明 (1)传递引用给函数与传递指针的效果是一样的,形参变化实参也发生变化.(2)引用类型作形参,在内存中并没有产生实参的副本,它直接对实参操作:而一般变量作参数,形参与实参就占用 ...

  3. Learn Python3 the hard way 第二天总结 命令行(2)

    复制文件 命令:cp含义:很简单,就是把一个文件复制成一个新文件而已.使用 cp -r命令可以复制一些包含文件的目录 移动文件 命令:mv含义:对文件进行"rename". 查看文 ...

  4. 新项目的vue组件

    项目地址:http://pan.baidu.com/s/1qYIxCXu 很久没有写博客的原因的是之前一直在解决一个问题,这个问题就是:我们在写组件的时候,官方推荐把css写在组件里面,但是如果我们写 ...

  5. java.lang.IllegalArgumentException: Service Intent must be explicit 解决办法

    java.lang.IllegalArgumentException: Service Intent must be explicit 意思是服务必须得显式的调用 我之前是这样使用绑定Service的 ...

  6. re正则表达式方法

    目录 1.python正则匹配 1.1 re.search 正则表达式 1.2 re.match() 正则表达式 1.3 re.match与re.search的区别 1.4 检索和替换 1.5 正则表 ...

  7. 【洛谷p2837】晚餐队列安排

    (一定要先贴一下wz大佬对这道题的定位:) 另外说一句:我终于在拖了nnnnnnnnn天之后做完了这道题 算法标签:(其实也用不到辽上面都有)但我就是要贴一下咬我啊) 好啦好啦,上 思路: 首先为了节 ...

  8. BZOJ 1833 数字计数 数位DP

    题目链接 做的第一道数位DP题,听说是最基础的模板题,但还是花了好长时间才写出来..... 想深入了解下数位DP的请点这里 先设dp数组dp[i][j][k]表示数位是i,以j开头的数k出现的次数 有 ...

  9. IDEA中部署tomcat,运行JSP文件,编译后的JSP文件存放地点总结

    首先保证你正常部署了Tomcat,并且正常在浏览器中运行了JSP文件. 那么Tomcat编译后的JSP文件(_jsp.class 和 _jsp.java)的存放地点: (一)一般存放在你安装的Tomc ...

  10. python-django rest framework框架之序列化

    序列化与反序列化: 对象 -> 字符串 序列化 字符串 -> 对象 反序列化 rest framework序列化+Form 目的: 解决QuerySet序列化问题 功能:解析 和 过滤 - ...