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

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

本示例K线交易量（底部柱子）的颜色变化规则为：当前现价（收盘价） - 前一条现价（收盘价）
决定的，大于等于0为红（涨），小于0为绿（跌）。这里可能有的计算规则是以交易量来计算的。
数据为真实接口数据，处理后存储在模块里。由于使用者不同，接口数据格式肯定有不同，所以绘前的metadata1()和metadata2()方法为数据转化接口。
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"}
}

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

微信小程序中这么简单的设置页面背景图及字体颜色的方法，你还不会？
在微信小程序中,我们不免的要设置背景图片和字体颜色. 那怎么样才能做到简单的设置背景图片和字体颜色呢? 话不多说,直接开讲首先先说怎么设置页面背景图片: 这是博主准备的照片. 下面是在wxml中的代 ...
在微信小程序中，swiper组件（轮播图4）的常用属性
swiper组件的常用属性属性类型默认值说明 indicator-dots boolean false 是否显示版面指示点 indicator-color color rgba(0,0,0,3 ...
微信小程序中如何制作瀑布流效果
微信小程序中如何制作瀑布流效果如图是首先,页面布局,页面分为两个部分,左右各一部分,各自插入图片,页面代码如下: <view class="city_history"> ...
微信小程序中使用Echarts（折线图）
一.微信中使用 Echars 直接在官网小程序使用Echarts中(文档-教程-在微信中使用Echarts),找到GitHub上的DEMO下载链接,官网有详细的使用步骤官网:http://echar ...
微信小程序中使用echarts图
嗨喽大家好,我是老黑.最近这段时间完成了一个功能,那就是在微信小程序中引入了echarts图,也算是对这段时间的工作的一个总结吧.这个功能自己花费了很长的时间才整出来.后来自己反省了以下,总结了以 ...
微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
微信小程序中使用ECharts--折线图、柱状图、饼图等
微信小程序开发者的反馈,表示他们强烈需要像 ECharts 这样的可视化工具.但是微信小程序是不支持 DOM 操作的,Canvas 接口也和浏览器不尽相同. 因此,ECharts 团队和微信小程序官方 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
在微信小程序中使用字体图标
方法一:转化为base64 第一步:在阿里巴巴矢量图标库下载需要的图标 QQ截图20180316191514.png 点击下载代码,将下载后的download.zip解压第二步:进入https:// ...
使用Filler4提取微信小程序中的视频
因为需要做防范电信网络诈骗的宣传,但是相关视频网站的内容都不适合宣传使用,最后在微信小程序搜索到一些合适的内容,但是微信小程序的视频不能直接下载,就考虑通过获得文件地址直接下载. 1.机器环境系统: ...

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

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

最新文章

热门文章