wx-charts:基于canvas绘制:饼图,线图,柱状图(适用1122)
来源:互联网 发布:大数据分析工程师职称 编辑:程序博客网 时间:2024/06/03 09:25
微信小程序图表工具,charts for WeChat small app
基于canvas绘制,体积小巧
持续优化更新中,请保持关注~
支持图表类型
- 饼图 pie
- 圆环图 ring
- 线图 line
- 柱状图 column
- 区域图 area
代码分析 Here
如何使用1、直接引用编译好的文件 dist/charts.js
2、自行编译
git clone github.com/xiaolin3303/wx-charts.git
npm install rollup -g
npm install
rollup -c 或者 rollup --config rollup.config.prod.js
参数说明
opts Object
opts.canvasId String required 微信小程序canvas-id
opts.width Number required canvas宽度,单位为px
opts.height Number required canvas高度,单位为px
opts.animation Boolean default true 是否动画展示
opts.type String required 图表类型,可选值为pie, line, column, area, ring
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 自定义显示数据内容
Examplepie chartvar 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: 320,
height: 200,
dataLabel: false
});
ring chart
new Charts({
canvasId: 'pieCanvas',
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
});
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: 320,
height: 200
});
columnChart
new Charts({
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
});
areaChart
new Charts({
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:基于canvas绘制:饼图,线图,柱状图(适用1122)
- 第三方Charts绘制图表四种形式:饼状图,雷达图,柱状图,直线图
- 微信小程序图表插件(wx-charts)
- 微信小程序图表插件(wx-charts)
- 简单jQplot创建引擎(支持线图/饼图/柱状图)
- canvas基于页面宽度绘制饼图数据(适用与多屏幕适配开发)
- 【Android】报表、线图、饼图、柱状图 (工具整理)
- 【Android】报表、线图、饼图、柱状图 (工具整理)
- 【Android】报表、线图、饼图、柱状图 (工具整理)
- 【Android】报表、线图、饼图、柱状图 (工具整理)
- 【Android】报表、线图、饼图、柱状图 (工具整理)
- android canvas绘制折线图和柱状图
- 利用canvas绘制柱状图的一种方法
- 基于AChartEngine绘制股票走势图----K线图一(绘制阴线阳线)
- C# 绘制统计图(折线,柱状图,饼图)
- 基于Canvas绘制的图表
- 基于matlab的三维柱状图绘制
- Android 自定义控件 Canvas 绘制 柱状图 ,支持触摸操作
- 链表中倒数第k个节点
- XMPP协议实现原理介绍
- 简单字符串比较
- Rails Gem开发(四)——rack-cors解决Ajax跨域问题(CORS)
- 账户账本相关表
- wx-charts:基于canvas绘制:饼图,线图,柱状图(适用1122)
- 002 基础知识md
- 基于sql标准权限验证 修改添加自己的权限验证
- jquery easy ui datagrid 全选、反选、清除
- 格式化输入和输出
- pat-a1016. Phone Bills (25)
- 中值滤波与图像锐化
- 473. Matchsticks to Square
- Android应用视觉效果设计技巧