HQChart小程序教程3-新版2D单画布如何切换K线图和分时图
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群
如果还有问题可以加交流QQ群， 群号在git首页可以找到。
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);
},
})
扫一扫
2480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
