微信小程序推荐:股票;动态分时图、K线图

微信小程序推荐:股票;动态分时图、K线图由网络收集或网友分享,不要商用,仅限学习,请24小时务必删除。如侵犯了您的权益,请联系客服(kefu@vipsrc.net)删除。

说明

  • 本示例K线交易量(底部柱子)的颜色变化规则为:当前现价(收盘价) – 前一条现价(收盘价) 决定的,大于等于0为红(涨),小于0为绿(跌)。这里可能有的计算规则是以交易量来计算的。
  • 数据为真实接口数据,处理后存储在模块里。由于使用者不同,接口数据格式肯定有不同,所以绘前的metadata1()和metadata2()方法为数据转化接口
  • js设置的canvas大小实际上是以px为单位的,100%宽度的可设置’auto’,如页面中要指定canvas大小,则在js里需按规则先计算绘图的canvas大小。具体规则可以参考官方文档:WXSS尺寸单位
  • 正在施工中:在图上手势移动显示坐标线和数据明细。

文档

配置文档参考:wiki

微信小程序推荐:股票;动态分时图、K线图 微信小程序推荐:股票;动态分时图、K线图 微信小程序推荐:股票;动态分时图、K线图

代码示例:

[AppleScript]
/**  * Created by ChenChao on 2016/9/27.  */  var app = getApp(); var storage = require('../../utils/storage'); var kl = require('../../utils/wxChart/k-line'); var getOptionKline1 = function (type) {     return {         name: type || 'dk',         width: 'auto',         height: 160,         average: [5, 10, 20],         axis: {             row: 4,             col: 5,             showX: false,             showY: true,             showEdg: true,             paddingTop: 0,             paddingBottom: 1,             paddingLeft: 0,             paddingRight: 0,             color: '#cdcdcd'         },         xAxis: {             data: [],             averageLabel: []         },         yAxis: [],         callback: function (time) {             var page = getCurrentPages();             page = page[page.length - 1];             page.setData({                 kl1RenderTime: time             });         }     }; }; var getOptionKline2 = function (type) {     return {         name: type || 'dk',         width: 'auto',         height: 80,         average: [5, 10, 20],         axis: {             row: 1,             col: 5,             showX: false,             showY: true,             showEdg: true,             paddingTop: 0,             paddingBottom: 14,             paddingLeft: 0,             paddingRight: 0,             color: '#cdcdcd'         },         xAxis: {             times: [],             data: [],             averageLabel: []         },         yAxis: [],         callback: function (time) {             var page = getCurrentPages();             page = page[page.length - 1];             page.setData({                 kl2RenderTime: time             });         }     }; }; var kLine, kLineB; var ma5Arr, ma10Arr, ma20Arr,     ma5bArr, ma10bArr, ma20bArr;  Page({     data: {         ma5: '',         ma10: '',         ma20: '',         ma5b: '',         ma10b: '',         ma20b: '',         tabName: '',         stock: '',         code: '',         time: '',         yc: '',         kl1RenderTime: 0,         kl2RenderTime: 0,         minIndex: 3,         minArray: ['5分钟', '15分钟', '30分钟', '60分钟']     },     onLoad: function () {         //默认切换到日K         this.tabChart({             target: {                 dataset: {                     type: 'dk'                 }             }         });     },     tabChart: function (e) {         var type = e.target.dataset.type;         var getDataByType = function (type) {             return {                 'dk': function () {                     return storage.getDkData();                 },                 'wk': function () {                     return storage.getWkData();                 },                 'mk': function () {                     return storage.getMkData();                 }             }[type]();         };         var data = getDataByType(type);         this.setData({             tabName: type,             stock: data.name,             code: data.code,             time: data.info.time,             yc: data.info.yc         });         this.draw(data, type);     },     tabMinChart: function (e) {         var type = 'mink';         var index = e.detail.value;         index = index=== '' ? 3 : index;         var getDataByType = function (type) {             return {                 'mink-5': function () {                     return storage.getMin5Data();                 },                 'mink-15': function () {                     return storage.getMin15Data();                 },                 'mink-30': function () {                     return storage.getMin30Data();                 },                 'mink-60': function () {                     return storage.getMin60Data();                 }             }[type]();         };         var typeList = [5, 15, 30, 60];         var minType = type + '-' + typeList[index];         var data = getDataByType(minType);         this.setData({             tabName: type,             minIndex: index,             stock: data.name,             code: data.code,             time: data.info.time,             yc: data.info.yc         });         this.draw(data, minType);     },     draw: function (data, type) {         kLine = kl('k-line').init(getOptionKline1(type));         kLine.metaData1(data, getOptionKline1(type));         kLine.draw();          kLineB = kl('k-line-b').init(getOptionKline2(type));         kLineB.metaData2(data, getOptionKline2(type));         kLineB.draw();          var yAxis1 = kLine.options.yAxis;         var yAxis2 = kLineB.options.yAxis;         ma5Arr = yAxis1[1].dataShow;         ma10Arr = yAxis1[2].dataShow;         ma20Arr = yAxis1[3].dataShow;         ma5bArr = yAxis2[1].dataShow;         ma10bArr = yAxis2[2].dataShow;         ma20bArr = yAxis2[3].dataShow;         this.showLastAverage();     },     showLastAverage: function () {         this.setData({             ma5: ma5Arr[ma5Arr.length - 1],             ma10: ma10Arr[ma10Arr.length - 1],             ma20: ma20Arr[ma20Arr.length - 1],             ma5b: ma5bArr[ma5bArr.length - 1],             ma10b: ma10bArr[ma10bArr.length - 1],             ma20b: ma20bArr[ma20bArr.length - 1]         });     } }); 

项目地址及下载:

https://github.com/Shaman05/wxCharts
微信小程序推荐:股票;动态分时图、K线图 wxCharts-master.zip (1.04 MB, 下载次数: 545)

小鱼源码网www.51xyyx.com

轻松一刻:

姐姐出差,晚上姐夫和小姨子在客厅聊天,姐夫问:“你税后多少钱?”   小姨子脸一红,小声说:“和姐夫睡还提什么钱?”
1.本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除! 2.本站站内提供的所有可下载资源(软件等等)本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发);但本网站不能保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug;同时本站用户必须明白,小鱼源码对提供下载的软件等不拥有任何权利(本站原创和特约原创作者除外),其版权归该资源的合法拥有者所有。 3.请您认真阅读上述内容,购买即以为着您同意上述内容。
小鱼源码下载网,一个分享交流代码的地方 » 微信小程序推荐:股票;动态分时图、K线图

精品源码,商业服务,发布得积分,VIP免费下

开通会员 发布资源