wx-charts：基于canvas绘制：饼图，线图，柱状图

zhichi_admin · 发表于 2017-4-5 13:24:14

最近图表工具，一个比一个6，这个目前最6666666

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

基于canvas绘制，体积小巧

持续优化更新中，请保持关注~

支持图表类型

饼图 pie
圆环图 ring
线图 line
柱状图 column
区域图 area

代码分析 Here

如何使用

1、直接引用编译好的文件 dist/charts.js

2、自行编译

[mw_shl_code=applescript,true]git clone github.com/xiaolin3303/wx-charts.git
npm install rollup -g
npm install
rollup -c 或者 rollup --config rollup.config.prod.js[/mw_shl_code]

参数说明

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 自定义显示数据内容

Example pie chart

[mw_shl_code=applescript,true]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: 320,
height: 200,
dataLabel: false
});[/mw_shl_code]

ring chart

[mw_shl_code=applescript,true]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
});[/mw_shl_code]

line chart

[mw_shl_code=applescript,true]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
});[/mw_shl_code]

columnChart

[mw_shl_code=applescript,true]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
});[/mw_shl_code]

areaChart

[mw_shl_code=applescript,true]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
});[/mw_shl_code]

回复即下载项目附件：

游客，如果您要查看本帖隐藏内容请回复

lming · 发表于 2017-4-11 12:00:09

啥也不说了，感谢楼主分享哇！

农夫三拳553 · 发表于 2017-4-15 16:27:07

啥也不说了，感谢楼主分享哇！

lyj4532556 · 发表于 2017-4-20 14:46:57

啥也不说了，感谢楼主分享哇！

播洲浪人 · 发表于 2017-4-21 14:39:43

啥也不说了，感谢楼主分享哇！

Po沐沐 · 发表于 2017-5-4 09:31:21

谢谢分享啊

阳光150 · 发表于 2017-5-4 16:24:19

啥也不说了，感谢楼主分享哇！
来自: 微社区

谁折南枝傍小丛 · 发表于 2017-5-6 11:51:47

啥也不说了，感谢楼主分享哇！

谁折南枝傍小丛 · 发表于 2017-5-7 14:34:19

啥也不说了，感谢楼主分享哇！

烟花易冷 · 发表于 2017-5-10 08:59:42

啥也不说了，感谢楼主分享哇！

		自动登录	找回密码
密码			立即注册

wx-charts：基于canvas绘制：饼图，线图，柱状图

本帖子中包含更多资源

相关帖子

突出贡献

优秀版主

荣誉管理

论坛元老