用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2016-11-27 20:48:40 天下雪原创达人 造轮子 人生巅峰 楼主 5210372
点评:很多人一直在求的K线图;

2.png
3.png
4.png

代码实例:
[JavaScript] 纯文本查看 复制代码
//引入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;


[JavaScript] 纯文本查看 复制代码
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://git.oschina.net/wulinxu/wxChart
wulinxu-wxChart-master.zip (19.24 KB, 下载次数: 324)
1.png

评分

参与人数 2原创 +2 浮云 +40 收起 理由
jsh5css + 1 + 20 很给力!
skyvow + 1 + 20 很给力!

查看全部评分

有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
huifukejianzhenmafan
huifukekanmafan
look a look
我是要看源码的
6666666666
2016-11-29 08:21:41 温馨 架构狮
7#
thanks you
参考一下,谢谢楼主分享
2016-11-29 09:49:31 lqm123 架构狮
9#
谢谢楼主分享
6666666666666
2016-11-29 11:20:40 willnuli 架构狮
11#
k线图适合股票业务
2016-11-29 14:09:20 ufoe 架构狮
12#
看着不错,不知道是基于什么做的?
ufoe 发表于 2016-11-29 14:09
看着不错,不知道是基于什么做的?

少年,可以研究研究,研究好,可以改进一下分享出来
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
2016-11-30 09:23:55 海洋 攻城狮
14#
好好好好好好
2016-11-30 10:14:40 elevean优秀会员纪念 架构狮
15#
多谢楼主分享
1234下一页
发新帖
您需要登录后才可以回帖 登录 | 立即注册