微信小程序图表插件(wx-charts)实例代码


Posted in Javascript onJanuary 17, 2017

微信小程序图表工具,charts for WeChat small app

基于canvas绘制,体积小巧

支持图表类型

  • 饼图 pie
  • 圆环图 ring
  • 线图 line
  • 柱状图 column
  • 区域图 area
  • 代码分析 Here

参数说明

opts Object

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

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

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

opts.title Object (only for ring chart)

opts.title.name String 标题内容

opts.title.fontSize Number 标题字体大小(可选,单位为px)

opts.title.color String 标题颜色(可选)

opts.subtitle Object (only for ring chart)

opts.subtitle.name String 副标题内容

opts.subtitle.fontSize Number 副标题字体大小(可选,单位为px)

opts.subtitle.color String 副标题颜色(可选)

opts.animation Boolean default true 是否动画展示

opts.legend Boolen default true 是否显示图表下方各类别的标识

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

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

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

opts.dataPointShape Boolean default true 是否在图表中显示数据点图形标识

opts.xAxis Object X轴配置

opts.xAxis.disableGrid Boolean default false 不绘制X轴网格

opts.yAxis Object Y轴配置

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

opts.yAxis.min Number Y轴起始值

opts.yAxis.max Number Y轴终止值

opts.yAxis.title String Y轴title

opts.yAxis.disabled Boolean default false 不绘制Y轴

opts.series Array required 数据列表

数据列表每项结构定义

dataItem Object

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

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

dataItem.name String 数据名称

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

Example

pie chart

var wxCharts = require('wxcharts.js');
new wxCharts({
 canvasId: 'pieCanvas',
 type: 'pie',
 series: [{
  name: 'cat1',
  data: 50,
 }, {
  name: 'cat2',
  data: 30,
 }, {
  name: 'cat3',
  data: 1,
 }, {
  name: 'cat4',
  data: 1,
 }, {
  name: 'cat5',
  data: 46,
 }],
 width: 360,
 height: 300,
 dataLabel: true
});

微信小程序图表插件(wx-charts)实例代码

微信小程序图表插件(wx-charts)实例代码

ring chart

new wxCharts({
 canvasId: 'ringCanvas',
 type: 'ring',
 series: [{
  name: '成交量1',
  data: 15,
 }, {
  name: '成交量2',
  data: 35,
 }, {
  name: '成交量3',
  data: 78,
 }, {
  name: '成交量4',
  data: 63,
 }],
 width: 320,
 height: 200,
 dataLabel: false
});

微信小程序图表插件(wx-charts)实例代码

微信小程序图表插件(wx-charts)实例代码

line chart

new wxCharts({
 canvasId: 'lineCanvas',
 type: 'line',
 categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
 series: [{
  name: '成交量1',
  data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
  format: function (val) {
   return val.toFixed(2) + '万';
  }
 }, {
  name: '成交量2',
  data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
  format: function (val) {
   return val.toFixed(2) + '万';
  }
 }],
 yAxis: {
  title: '成交金额 (万元)',
  format: function (val) {
   return val.toFixed(2);
  },
  min: 0
 },
 width: 320,
 height: 200
});

微信小程序图表插件(wx-charts)实例代码

微信小程序图表插件(wx-charts)实例代码

columnChart

new wxCharts({
 canvasId: 'columnCanvas',
 type: 'column',
 categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
 series: [{
  name: '成交量1',
  data: [15, 20, 45, 37, 4, 80]
 }, {
  name: '成交量2',
  data: [70, 40, 65, 100, 34, 18]
 }],
 yAxis: {
  format: function (val) {
   return val + '万';
  }
 },
 width: 320,
 height: 200
});

微信小程序图表插件(wx-charts)实例代码

微信小程序图表插件(wx-charts)实例代码

areaChart

new wxCharts({
 canvasId: 'areaCanvas',
 type: 'area',
 categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
 series: [{
  name: '成交量1',
  data: [70, 40, 65, 100, 34, 18],
  format: function (val) {
   return val.toFixed(2) + '万';
  }
 }, {
  name: '成交量2',
  data: [15, 20, 45, 37, 4, 80],
  format: function (val) {
   return val.toFixed(2) + '万';
  }
 }],
 yAxis: {
  format: function (val) {
   return val + '万';
  }
 },
 width: 320,
 height: 200
});

微信小程序图表插件(wx-charts)实例代码

微信小程序图表插件(wx-charts)实例代码

demo下载地址:demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
vue-quill-editor的使用及个性化定制操作
Aug 04 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 #Javascript
js生成随机数方法和实例
Jan 17 #Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 #Javascript
js实现手机拍照上传功能
Jan 17 #Javascript
angular实现form验证实例代码
Jan 17 #Javascript
基于jQuery实现数字滚动效果
Jan 16 #Javascript
5种JavaScript脚本加载的方式
Jan 16 #Javascript
You might like
Email+URL的判断和自动转换函数
2006/10/09 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
PHP类的特性实例分析
2016/09/28 PHP
php实现微信发红包功能
2018/07/13 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
初学python数组的处理代码
2011/01/04 Python
重命名批处理python脚本
2013/04/05 Python
探究python中open函数的使用
2016/03/01 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
Python简单生成随机数的方法示例
2018/03/31 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Python配置文件处理的方法教程
2019/08/29 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
Python使用re模块验证危险字符
2020/05/21 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
上课玩手机检讨书
2014/02/08 职场文书
服务承诺书怎么写
2014/05/24 职场文书
跑吧孩子观后感
2015/06/10 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android