微信小程序图表插件(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 相关文章推荐
require.js深入了解 require.js特性介绍
Sep 04 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
React中的refs的使用教程
Feb 13 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
PM2自动部署代码步骤流程总结
Dec 10 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
PHP中实现进程间通讯
2006/10/09 PHP
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
python中字符串前面加r的作用
2015/06/04 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
销售文员的岗位职责
2013/11/20 职场文书
校本教研工作制度
2014/01/22 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
企业年度评优方案
2014/06/02 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
个人投资合作协议书
2014/10/12 职场文书
以权谋私检举信范文
2015/03/02 职场文书
慰问信格式规范
2015/03/23 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书