【微信小程序中的股票分时图、K线图的源代码解析】

这篇文章分享的是关于：微信小程序中的股票分时图、K线图的源代码。

1. 本示例K线交易量（底部柱子）的颜色变化规则为：当前现价（收盘价） - 前一条现价（收盘价）
   决定的，大于等于0为红（涨），小于0为绿（跌）。这里可能有的计算规则是以交易量来计算的。

2. 数据为真实接口数据，处理后存储在模块里。由于使用者不同，接口数据格式肯定有不同，所以绘前的metadata1()和metadata2()方法为数据转化接口。

3. js设置的canvas大小实际上是以px为单位的，100%宽度的可设置’auto’，如页面中要指定canvas大小，则在js里需按规则先计算绘图的canvas大小。具体规则可以参考官方文档：WXSS尺寸单位

优快云源码下载地址：https://download.youkuaiyun.com/download/u010978757/85496576
DATA5U源码网地址：https://code.data5u.com/code/detail-611.html

分享app.js代码如下：

/**
 * Created by ChenChao on 2017/1/12.
 */

App({
    onLaunch: function () {
        //调用API从本地缓存中获取数据
        var logs = wx.getStorageSync('logs') || [];
        logs.unshift(Date.now());
        wx.setStorageSync('logs', logs);
    },
    onShow: function () {
        //todo
    },
    onHide: function () {
        //todo
    },
    getUserInfo: function (cb) {
        var that = this;
        if (this.globalData.userInfo) {
            typeof cb == "function" && cb(this.globalData.userInfo)
        } else {
            //调用登录接口
            wx.login({
                success: function () {
                    wx.getUserInfo({
                        success: function (res) {
                            that.globalData.userInfo = res.userInfo;
                            typeof cb == "function" && cb(that.globalData.userInfo)
                        }
                    })
                }
            });
        }
    },
    globalData: {
        userInfo: null
    }
});

分享app.json代码如下：

```r
{
  "pages": [
    "pages/index/index",
    "pages/ts/ts",
    "pages/kl/kl",
    "pages/setting/setting"
  ],
  "window": {
    "navigationBarBackgroundColor": "#262834",
    "navigationBarTitleText": "wxChart-demo",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#1C1F27"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "Home",
        "iconPath": "images/home0.png",
        "selectedIconPath": "images/home.png"
      },
      {
        "pagePath": "pages/ts/ts",
        "text": "分时图",
        "iconPath": "images/ts0.png",
        "selectedIconPath": "images/ts.png"
      },
      {
        "pagePath": "pages/kl/kl",
        "text": "K线",
        "iconPath": "images/kl0.png",
        "selectedIconPath": "images/kl.png"
      },
      {
        "pagePath": "pages/setting/setting",
        "text": "设置",
        "iconPath": "images/setting0.png",
        "selectedIconPath": "images/setting.png"
      }
    ],
    "color": "#c2c4d0",
    "selectedColor": "#3483e9",
    "backgroundColor": "#252934"
  }
}