什么是wxChart
- wxChart是一个微信小程序上的图表插件
环境要求
- 需要微信小程序项目环境
安装及使用
- wxChart目录放置在项目中引入即可
- 详细使用请参照/pages/chart/chart.js
基本用法
- 请参照chart.js
命名规范
- 变量名使用小写加下划线方式,例如
var chart_type = null;
* 方法及类名使用首字母小写的驼峰形式,例如
* 属性使用下划线开头的小写加下划线方式,例如
var painterFactory = {
createObj : function(){
......
}
}
var chartUtil = {
createObj : function(){
var obj = {};
var _canvas_id = null;
}
}
目录结构
-wxChart
|–chartUtil.js //入口
|–chartColor.js //定义常用颜色
|–chartType.js //定义所有图表类型
|–painter //存放painter相关文件
||| –painterFactory.js //生成各种类型的的painter
||| –basePainter.js //xxxPainter的父类
||| –testPainter.js //测试
||| –brokenLinPainter.js //折线图
||| –candlestickPainter.js //K线图
开发流程
- 1./wxChart/painter 新增需要支持的painter文件,可参照testPainter.js
- 2./wxChart/chartType.js 增加图表类型
- 3./wxChart/painter/painterFactory.js 引入新增的文件,并且与对应的类型关联起来
运行示例
代码实例
初始化
//引入painter工厂 var painterFactoryFile = require("painter/painterFactory.js"); var painterFactory = painterFactoryFile.painterFactory; /** * @author Merlin * @date 2016-11-10 * @description 图表库 */ var chartUtil = { createObj : function(){ var obj = {}; //需要渲染图表的 canvas ID var _canvas_id = null; //参数配置 var _options = null; //setter and getter obj.setCanvasId = function(canvas_id){ _canvas_id = canvas_id; } obj.getCanvasId = function(){ return _canvas_id; } obj.setOptions = function(options){ _options = options; } obj.getOptions = function(){ return _options; } /** * 初始化 */ obj.init = function(canvas_id, options){ obj.setCanvasId(canvas_id); obj.setOptions(options); } obj.hello = function(){ console.log("hello world"); }; obj.draw = function(){ var testPainterObj = painterFactory.createObj(_canvas_id, _options); testPainterObj.draw(); }; return obj; } }; module.exports.chartUtil = chartUtil; //引入其他文件 var chartTypeFile = require("chartType.js"); var chartType = chartTypeFile.chartType; module.exports.chartType = chartType; var chartColorFile = require("chartColor.js"); var chartColor = chartColorFile.chartColor; module.exports.chartColor = chartColor; Page({ canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg) }, onReady: function (e) { //引入文件 var chartUtilFile = require("../../utils/wxChart/chartUtil.js"); //实例化 var chartUtilObj = chartUtilFile.chartUtil.createObj(); //配置参数 var canvas_id = "first_canvas"; var xaxis = [ { xdata : ["07:00", "11:00", "15:00", "20:00", "00:00", "04:00"] } ]; var ydata = [Math.round(Math.random()*200)]; for (var i = 1; i < 200; i++) { ydata.push(Math.round((Math.random() - 0.5)*10 + ydata[i-1])); } var yaxis = [ { ydata : ydata } ]; var options = { "page_obj" : this, "chart_type" : chartUtilFile.chartType.brokenLine, "xaxis" : xaxis, "yaxis" : yaxis, "line_color" : chartUtilFile.chartColor.red, "text" : "此处放标题!", "unit" : "(元/10克)", "font_size": 10 }; //初始化 chartUtilObj.init(canvas_id, options); //开始画图 chartUtilObj.draw(); }, data: { imgUrls: [ 'http://cdn.qilin99.cn/ctrade_cms/img/default_1479207074514', 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], indicatorDots: false, autoplay: true, interval: 5000, duration: 1000 } })
源码地址
https://gitee.com/wulinxu/wxChart
本地下载