微信小程序图表插件 - wx-charts
微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个。
wx-charts基于canvas绘制的微信小程序图表插件
支持图表类型
- 饼图 pie
- 线图 line
- 柱状图 column
- 区域图 area
高清显示
设置canvas的尺寸为2倍大小,然后缩小到50%,建议都进行这样的设置,图表本身绘制时是按照高清显示配置的,不然整体效果会偏大
/* 例如设计图尺寸为320 x 300 */ .canvas {width: 640px;height: 600px;transform: scale(0.5) }
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
var Charts = require('charts.js'); new Charts({canvasId: 'pieCanvas',type: 'pie',series: [{name: '成交量1',data: 15,}, {name: '成交量2',data: 35,}, {name: '成交量3',data: 78,}, {name: '成交量4',data: 63,}],width: 640,height: 400,dataLabel: false });
线图line chart
new Charts({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: 640,height: 400 });
柱状图columnChart
new Charts({canvasId: 'columnCanvas',type: 'column',categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],series: [{name: '成交量1',data: [15, 20, 45, 37, 4, 80]}, {name: '成交量2',data: [70, 40, 65, 100, 34, 18]}, {name: '成交量3',data: [70, 40, 65, 100, 34, 18]}, {name: '成交量4',data: [70, 40, 65, 100, 34, 18]}],yAxis: {format: function (val) {return val + '万';}},width: 640,height: 400,dataLabel: false });
项目地址及下载:
https://github.com/xiaolin3303/wx-charts
本文链接:微信小程序图表插件(wx-charts)http://www.51xuediannao.com/xiaochengxu/wx-charts.html
转载于:https://www.cnblogs.com/victorlyw/p/8862660.html
微信小程序图表插件 - wx-charts相关推荐
- wx-charts 微信小程序图表插件
阅读数:9460 微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧,支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好 ...
- 微信小程序图表插件(wx-charts)
微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是 微信小程序图表插件中比较强大好使的一个. wx- ...
- 微信小程序----图表插件示例用法(wx-charts)
微信小程序----图表插件示例用法(wx-charts) 参考链接:https://blog.csdn.net/JxufeCarol/article/details/117718321 全部图形示例链 ...
- 小程序 微信统计表格_微信小程序图表插件(wx-charts)
微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个. wx-c ...
- 计算机代码图表,微信小程序图表插件(wx-charts)实例代码
微信小程序图表工具,charts for WeChat small app 基于canvas绘制,体积小巧 支持图表类型 饼图 pie 圆环图 ring 线图 line 柱状图 column 区域图 ...
- 微信小程序图表插件wxcharts使用
参考地址:https://github.com/xiaolin3303/wx-charts/issues/58 1.先看效果,如果是想要的在继续 2.wxml 一些案例 <!--pages/wx ...
- 微信小程序图表插件 echarts-for-weixin
有勇气的牛排 官网 https://www.920vip.net/ 微信小程序总结大全 下载地址 https://github.com/ecomfe/echarts-for-weixin/tree/m ...
- 微信小程序图表插件wxcharts.js使用小记,Echarts.js,推荐uCharts.js
一.wxcharts.js 参考地址:https://github.com/xiaolin3303/wx-charts/issues/58 参数含义参考:https://www.cnblogs.com ...
- 微信小程序 图表chart
参考链接: (1)在微信小程序中绘制图表(part1) https://segmentfault.com/a/1190000007649376 (2)在微信小程序中绘制图表(part2) https: ...
最新文章
- lnmp mysql 哪个好_lamp与lnmp的选择
- C++无符号整数的反转位的实现算法(附完整源码)
- android jni release,Android NDK 设置编译模式debug和release
- 最重要的 Java EE 最佳实践
- 关于软件定义IT基础设施的未来,深信服是这么思考的
- 周华健,歌声伴我成长(三)
- java图片压缩工具
- autojs之七牛直播云
- linux和unix的关系
- SpringBoot2.0学习第四篇之拦截器过滤器配置
- 以太网性能测试仪-Y.1564测试
- Python爬取腾讯招聘信息
- godot着色器shader效果收集
- DXP_protel2004_原理图设计基础_新建和添加原理图库文件_元件编辑范例
- 24段魔尺,可以折出哪些精美图案(续)
- 面试技巧--国企银行篇
- Huffman编码的Matlab实现--用于单导联ECG数据的压缩和解压缩
- ZZY‘s_wsl_guide
- 大数据权限管理组件Apache Ranger简介和原理
- 关于java 版 Spring Cloud 电子招标采购系统的介绍