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

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

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

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

CSDN源码下载地址:https://download.csdn.net/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"
  }
}


Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐