wxChart：微信小程序H5图表插件：饼状图，K线图

什么是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

本地下载