HQChart小程序教程3-新版2D单画布如何切换K线图和分时图

K线图和分时图图形切换流程图代码讲解K线周期切换创建K线图步骤 配色修改禁止hqchart缓存绘制 HQChart代码地址完整示例代码wxmlwxssjs

K线图和分时图

传统的一般会使用2个画布来显示，当一个画布显示的时候，另外一个画布就隐藏掉。 本教程是另外一个思路，使用一个画布来动态显示K线图和分时图，这样可以节省资源，但在切换的时候需要重新创建图形和下载数据，会慢一点。 如是使用2D画布详见教程HQChart小程序教程2-如何使用新版2D画布创建一个K线图

图形切换流程图

下图是分时图切换到K线图的流程，K线切换到分时图流程也差不多， 我就不画了。

代码讲解

主要使用8795以后的版本，老的版本画布会放大 对实例中的部分代码解释下，你也可以直接跳过看下面的完整源码

K线周期切换

对应上面的流程图

ChangeKLinePeriod(period) { if (!this.HistoryChart) //实例是否创建 { this.CreateKLineChart(period); //实例为空，直接创建K线图 } else { //当前实例是否是K线图 //竖屏K线类名为"KLineChartContainer" , 横屏: "KLineChartHScreenContainer" //竖屏分时图类名为“MinuteChartContainer” , 横屏: "MinuteChartHScreenContainer" if (this.HistoryChart.JSChartContainer.ClassName=="KLineChartContainer") { this.HistoryChart.ChangePeriod(period); //当前是K线图实例，直接调用接口切换周期 } else { //当前不是K线图实例 this.ClearHQChart(); //清空原来的实例 this.CreateKLineChart(period); //创建K线图 } } },

创建K线图

步骤

动态调整画布大小，可能分时图和K线图UI设计的时候大小不一样，就需要切换的时候动态调整查询画布节点创建hqchart实例，并绑定画布 CreateKLineChart(period) { console.log('[App::CreateKLineChart] '); //动态设置画布大小 this.setData({ Width: this.data.KLineWidth, Height: this.data.KLineHeight}, () => {}); var self = this; //查询画布节点 wx.createSelectorQuery() .select('#historychart') .fields({ node: true, size: true, }) .exec(function(res) { self.data.CanvasNode= res[0]; //创建画布元素，绑定画布节点，大小 var element = new JSCommon.JSCanvasElement(); element.ID = 'historychart'; element.CanvasNode =self.data.CanvasNode; element.Height = self.data.KLineHeight ; //高度宽度需要手动绑定!! 微信没有元素类 element.Width = self.data.KLineWidth ; //创建hqchart实例 self.HistoryChart = JSCommon.JSChart.Init(element); //把画布绑定到行情模块中 self.HistoryOption.Symbol=self.data.Symbol; //设置股票代码 self.HistoryOption.Period=period; //设置周期 self.HistoryChart.SetOption(self.HistoryOption); //创建K线图 }) },

配色修改

在onReady（）中可以对hqchart的全局配色文件修改，比如切换黑色风格

onReady() { this.InitalHQChart(); }, InitalHQChart() { console.log('[App::InitalHQChart]'); //设置黑色风格 var style = JSCommonHQStyle.GetStyleConfig(JSCommonHQStyle.STYLE_TYPE_ID.BLACK_ID); JSCommon.JSChart.SetStyle(style); //设置K线缩放大小 //var zoom=JSCommon.JSChart.GetKLineZoom(); //zoom.length=0; //zoom.push([4,4]); //默认页面第1次显示日K图 this.CreateKLineChart(0); },

禁止hqchart缓存绘制

由于小程序2D画布加载缓存图片在有些安卓的机器无效，可以通过在setoption里面设置禁止hqchart使用图片缓存机制

K线图：

HistoryOption: { Type: '历史K线图', ........ IsFullDraw:true, //不是使用缓存每次都重绘 ......... }

分时图：

MinuteOption: { ....... IsFullDraw:true, //不是使用缓存每次都重绘 ........ }

如果还有问题可以加交流QQ群: 950092318

HQChart代码地址

地址：https://github.com/jones2000/HQChart

完整示例代码

wxml

<view class="container"> <canvas class="historychart" id='historychart' type="2d" style="height:{{Height}}px; width:{{Width}}px;" bindtouchstart='historytouchstart' bindtouchmove='historytouchmove' bindtouchend='historytouchend'> </canvas> <view class="buttonlist" style="top:{{Height}}px; width:{{PageWidth}}px"> <button type="default" size='mini' bindtap='OnZoomIn' >放大</button> <button type="default" size='mini' bindtap="OnZoomOut">缩小</button> <button type="default" size='mini' bindtap="OnMoveForward">前进</button> <button type="default" size='mini' bindtap="OnMoveBackword">后退</button> <button type="default" size='mini' bindtap="OnMoveLatest">最新</button> <button type="default" size='mini' bindtap="OnTest">切换</button> <button type="default" size='mini' bindtap="OnChangeMinute">分时图</button> <button type="default" size='mini' bindtap="OnKLineDayPeriod">日线</button> <button type="default" size='mini' bindtap="OnKLine5MinutePeriod">5分钟</button> </view> </view>

wxss

page { background-color:rgb(0,0,0) } .historychart { position:absolute; top: 0px; left: 0px; z-index: 0; } .container { position:absolute; top: 0px; left: 0px; height: 100%; width:100%; } .title { position:absolute; top: 0px; left: 0px; height: 40px; z-index:5; } .buttonlist { position:absolute; }

js

//index.js //获取应用实例 const app = getApp() import { JSCommon } from "../../jscommon/umychart.wechat.3.0.js"; import { JSCommonHQStyle } from "../../jscommon/umychart.style.wechat.js"; Page( { data: { Height: 0, Width: 0, CanvasNode:null, Symbol:'600000.sh', KLineWidth:0, KLineHeight:0, MinuteWidth:0, MinuteHeight:0, PageWidth:0, }, HistoryChart: null, HistoryOption: { Type: '历史K线图', Windows: //窗口指标 [ { Index: 'MA',IsDrawTitleBG:true}, { Index: 'VOL', IsDrawTitleBG:true}, ], //ColorIndex: { Index: '五彩K线-双飞乌鸦' }, //五彩K线 //TradeIndex: { Index: '交易系统-BIAS' }, //交易系统 Symbol: "000001.sz", IsAutoUpdate: true, //是自动更新数据 AutoUpdateFrequency:3000, CorssCursorInfo: { Left: 2, Right: 2, Bottom: 1, IsShowCorss: true, IsShowClose: false, VPenType: 0, HPenType:0 }, //十字光标刻度设置 CorssCursorTouchEnd:false, //手离开屏幕 隐藏十字光标 IsClickShowCorssCursor:true, //点击显示十字光标 IsFullDraw:true, //不是使用缓存每次都重绘 //SplashTitle:'下载中.....', //Language:'EN', KLine: { DragMode:1, //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择 Right: 1, //复权 0 不复权 1 前复权 2 后复权 Period:1, //周期 0 日线 1 周线 2 月线 3 年线 MaxReqeustDataCount: 1000, //数据个数 MaxRequestMinuteDayCount:5, PageSize: 15, //一屏显示多少数据 //Info: ["业绩预告", "公告", "互动易", "调研", "大宗交易", "龙虎榜"], //信息地雷 //Policy: ["30天地量", "20日均线，上穿62日均线"], //策略信息 InfoDrawType:0, DrawType: 0, IsShowMaxMinPrice: false, RightSpaceCount: 2, }, /* SourceDatatLimit: [ { Period: 4, MaxCount: 50 } ], */ //DragDownload: { Minute: { Enable: true }, Day: { Enable: true } }, //拖拽下载 //叠加股票 Overlay: [ //{ Symbol: '000001.sh', DrawType:1, Color:'rgb(255,255,0)'}, ], KLineTitle: //标题设置 { IsShowName: true, //不显示股票名称 IsShowSettingInfo: true, //不显示周期/复权 /* 日期 开： 高： 量： //2行显示 时间 收： 低： 额： */ LineCount:1, //默认显示1行 }, Border: //边框 { Left: 0, //左边间距 Right: 50, //右边间距 Top:30, Bottom:25, }, Frame: //子框架设置 [ { SplitCount: 3, IsShowLeftText: false, IsShowRightText: true, Custom: [ { Type: 0, Position: 'right', }, { Type: 1, Position: 'left', IsShowLine: true, Data: [ { Value: 15.55, Text: '止损线', //Text:显示文本 Color: 'rgb(255,185,255)', TextColor: 'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色 }, { Value: 17.55, Text: '止盈线', //Text:显示文本 Color: 'rgb(255,185,0)', TextColor: 'rgb(255,255,255)', //Color:线段及文字背景色 TextColor:文字颜色 } ] } ] }, { SplitCount: 2 }, { SplitCount: 2 }, { SplitCount: 2 } ], ExtendChart: //扩展图形 [ { Name: 'KLineTooltip'}, //{ Name: 'MinuteTooltip'} ], }, MinuteOption: { Type: '分钟走势图', Symbol: "600000.sh", IsAutoUpate: true, //是自动更新数据 //IsShowCorssCursorInfo: false, //是否显示十字光标的刻度信息 CorssCursorTouchEnd: true, //手离开屏幕 隐藏十字光标 IsFullDraw:true, //不是使用缓存每次都重绘 Windows: //窗口指标 [ { Index: 'MACD', Modify: false, Change: false, TitleHeight: 16 }, //{ Index: "KDJ", Modify: false, Change: false, TitleHeight: 16} /* //定制通达信语法指标 { Name: '定制指标1', //指标名字 Script: 'DATA1:MA(C,N1);DATA2:MA(C,N2);', //指标的通达信脚本 Args: [{ Name: 'N1', Value: 7 }, { Name: 'N2', Value: 14 }], //脚本中用到的参数定义 Modify: true, Change: true } */ ], Border: //边框 { Left: 1, //左边间距 Right: 1, //右边间距 Top: 35, Bottom:30 }, Frame: //子框架设置,刻度小数位数设置 [ { SplitCount: 5, StringFormat: 1 }, { SplitCount: 2, StringFormat: 1 }, { SplitCount: 2, StringFormat: 1 }, { SplitCount: 2, StringFormat: 1 } ], MinuteTitle: //标题设置 { IsShow: true, IsShowName: false, //不显示股票名称 LineCount: 2, //默认显示1行 }, ExtendChart: //扩展图形 [ { Name: 'MinuteTooltip'} ], }, onLoad() { var self = this // 获取系统信息 wx.getSystemInfo({ success: (res) => { console.log(res); // 可使用窗口宽度、高度 console.log('height=' + res.windowHeight); console.log('width=' + res.windowWidth); var kLineWidth=res.windowWidth; var kLineHeight=res.windowHeight - 70; var minuteWidth=res.windowWidth-100; var minuteHeight=res.windowHeight - 70; self.setData( { Height:kLineHeight, Width: kLineWidth, PageWidth:res.windowWidth, KLineWidth:kLineWidth, KLineHeight:kLineHeight, MinuteWidth:minuteWidth, MinuteHeight:minuteHeight }); } }); }, onReady() { this.InitalHQChart(); }, CreateMinuteChart(dayCount) { console.log('[App::CreateMinuteChart]'); this.setData({ Width: this.data.MinuteWidth, Height: this.data.MinuteHeight}, () => {}); var self = this wx.createSelectorQuery() .select('#historychart') .fields({ node: true, size: true, }) .exec(function(res) { self.data.CanvasNode= res[0]; var element = new JSCommon.JSCanvasElement(); element.ID = 'historychart'; element.CanvasNode =self.data.CanvasNode; element.Height = self.data.MinuteHeight ; //高度宽度需要手动绑定!! 微信没有元素类 element.Width = self.data.MinuteWidth ; self.HistoryChart = JSCommon.JSChart.Init(element); //把画布绑定到行情模块中 self.MinuteOption.Symbol=self.data.Symbol; self.MinuteOption.DayCount=dayCount; self.HistoryChart.SetOption(self.MinuteOption); }); }, ChangeMinuteDayCount(dayCount) { if (!this.HistoryChart) { this.CreateMinuteChart(dayCount); } else { if (this.HistoryChart.JSChartContainer.ClassName!="MinuteChartContainer") { this.ClearHQChart(); this.CreateMinuteChart(dayCount); } else { this.HistoryChart.ChangeDayCount(dayCount); } } }, ChangeKLinePeriod(period) { if (!this.HistoryChart) { this.CreateKLineChart(period); } else { if (this.HistoryChart.JSChartContainer.ClassName=="KLineChartContainer") { this.HistoryChart.ChangePeriod(period); } else { this.ClearHQChart(); this.CreateKLineChart(period); } } }, CreateKLineChart(period) { console.log('[App::CreateKLineChart] '); this.setData({ Width: this.data.KLineWidth, Height: this.data.KLineHeight}, () => {}); var self = this wx.createSelectorQuery() .select('#historychart') .fields({ node: true, size: true, }) .exec(function(res) { self.data.CanvasNode= res[0]; var element = new JSCommon.JSCanvasElement(); element.ID = 'historychart'; element.CanvasNode =self.data.CanvasNode; element.Height = self.data.KLineHeight ; //高度宽度需要手动绑定!! 微信没有元素类 element.Width = self.data.KLineWidth ; //创建历史K线类 self.HistoryChart = JSCommon.JSChart.Init(element); //把画布绑定到行情模块中 self.HistoryOption.Symbol=self.data.Symbol; self.HistoryOption.Period=period; self.HistoryChart.SetOption(self.HistoryOption); //下面是测试一些功能用的，可以去掉 //Type:0, Date:, Time: , Name:名字, Line:{ Color:线段颜色, Type:线段类型 0 直线 1 虚线 } //Type: 1, Space: 第几个空白间距, Name:名字, Line: { Color: 线段颜色, Type: 线段类型 0 直线 1 虚线 } var customVerticalInfo = [ { Type: 0, Name:'刻度1', Date: 20200114, Time:1420, Line: { Color: 'rgb(35,222,0)', Type: 0 } }, { Type: 1, Name: '刻度2', Space: 3, Line: { Color: 'rgb(35,0,255)', Type: 1 } }, ]; self.HistoryChart.JSChartContainer.SetCustomVerical(0, customVerticalInfo); self.HistoryChart.AddEventCallback({ event: JSCommon.JSCHART_EVENT_ID.RECV_HISTROY_DATA, callback: self.OnRecvKLineData }); self.HistoryChart.AddEventCallback({ event: JSCommon.JSCHART_EVENT_ID.ON_TITLE_DRAW, callback: self.OnTitleDraw }); self.HistoryChart.AddEventCallback({ event: JSCommon.JSCHART_EVENT_ID.ON_CUSTOM_VERTICAL_DRAW, callback: self.OnCustmVericalDraw }); self.HistoryChart.AddEventCallback({ event: JSCommon.JSCHART_EVENT_ID.ON_CLICK_INDEXTITLE, callback: self.OnClickIndexName }) }) }, ClearHQChart() { if (this.HistoryChart) { this.HistoryChart.StopAutoUpdate(); this.HistoryChart=null; } }, InitalHQChart() { console.log('[App::InitalHQChart]'); //设置黑色风格 var style = JSCommonHQStyle.GetStyleConfig(JSCommonHQStyle.STYLE_TYPE_ID.BLACK_ID); JSCommon.JSChart.SetStyle(style); //var zoom=JSCommon.JSChart.GetKLineZoom(); //zoom.length=0; //zoom.push([4,4]); this.CreateKLineChart(0); }, OnRecvKLineData: function (event, data, obj) { console.log('[OnRecvKLineData]', event, data); }, OnCustmVericalDraw(event, data, obj) { console.log('[OnCustmVericalDraw]', event, data); }, OnTitleDraw(event, data, obj) { console.log('[OnTitleDraw]', event, data); }, OnClickIndexName(event,data,obj) { console.log('[OnClickIndexName]', event, data); }, OnChangeMinute(event,data,obj) { this.ChangeMinuteDayCount(1); }, OnKLineDayPeriod(event,data,obj) { this.ChangeKLinePeriod(0); }, OnKLine5MinutePeriod(event,data,obj) { this.ChangeKLinePeriod(5); }, //K线图事件 historytouchstart: function (event) { if (this.HistoryChart) this.HistoryChart.OnTouchStart(event); }, historytouchmove: function (event) { if (this.HistoryChart) this.HistoryChart.OnTouchMove(event); }, historytouchend: function (event) { if (this.HistoryChart) this.HistoryChart.OnTouchEnd(event); }, //当前图形是否是K线图 IsKLineChart() { if (!this.HistoryChart) return false; return this.HistoryChart.JSChartContainer.ClassName=="KLineChartContainer"; }, OnZoomOut: function (event) { if (!this.IsKLineChart()) return; var obj = { ID: 3 }; this.HistoryChart.JSChartContainer.ChartOperator(obj); }, OnZoomIn: function (event) { if (!this.IsKLineChart()) return; var obj = { ID: 4 }; this.HistoryChart.JSChartContainer.ChartOperator(obj); }, OnMoveForward(event) { if (!this.IsKLineChart()) return; var obj={ ID: 1, Step: 1 }; this.HistoryChart.JSChartContainer.ChartOperator(obj); }, OnMoveBackword(evnet) { if (!this.IsKLineChart()) return; var obj = { ID: 2, Step: 1 }; this.HistoryChart.JSChartContainer.ChartOperator(obj); }, OnMoveLatest(evnet) { if (!this.IsKLineChart()) return; var obj = { ID: 5 }; this.HistoryChart.JSChartContainer.ChartOperator(obj); }, OnTest(evnet) { //this.HistoryChart.ChangePeriod(5); if (!this.IsKLineChart()) return; var option = { Windows: [ { Index: "MA" }, { Index: "CCI" }, ], //窗口指标 }; this.HistoryChart.ChangeIndexTemplate(option); }, })