HQChart使用教程9- 如何快速创建K线训练页面
K线训练已重构新版本使用详见
效果图
https://opensource.zealink.com/hqweb/demo/phone13.html
demo页面部分代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>页面行情(K线图)</title>
<!-- 加载资源 -->
<link rel="stylesheet" href="content/css/tools.css" />
<link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
</head>
<body>
<div id="kline" style="width: 900px;height:400px;position: relative;"></div>
<script src="content/js/jquery.min.js"></script>
<script src="content/js/webfont.js"></script>
<script src="../jscommon/umychart.network.js"></script> <!-- 网络接口 -->
<script src="../jscommon/umychart.js"></script> <!-- K线图形 -->
<script src="../jscommon/umychart.complier.js"></script> <!-- 麦语言解析执行器 -->
<script src="../jscommon/umychart.index.data.js"></script> <!-- 基础指标库 -->
<script src="../jscommon/umychart.style.js"></script> <!-- 白色风格和黑色风格配置信息 -->
<script>
//简单的把K线控件封装下
function KLineTrainChart(divKLine)
{
this.DivKLine=divKLine;
this.Chart=JSChart.Init(divKLine); //把K线图绑定到一个Div上
//K线配置信息
this.Option= {
Type:'K线训练', //创建图形类型
Windows: //窗口指标
[
{Index:"MA", Modify:false,Change:false},
{Index:"VOL", Modify:false,Change:false},
],
Symbol:'000001.sz',
//TradeIndex: {Index:'交易系统-BIAS'}, //交易系统
IsShowCorssCursorInfo:false, //是否显示十字光标的刻度信息
KLine: //K线设置
{
Right:1, //复权 0 不复权 1 前复权 2 后复权
Period:0, //周期 0 日线 1 周线 2 月线 3 年线
MaxReqeustDataCount:1000, //数据个数
MaxRequestMinuteDayCount:10, //分钟数据取5天
PageSize:50, //一屏显示多少数据
//Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"], //信息地雷
IsShowTooltip:false, //是否显示K线提示信息
},
Border: //边框
{
Left:1, //左边间距
Right:50, //右边间距
Bottom:25, //底部间距
Top:25 //顶部间距
},
Frame: //子框架设置
[
{SplitCount:3,StringFormat:0, IsShowLeftText:false},
{SplitCount:2,StringFormat:0, IsShowLeftText:false},
{SplitCount:2,StringFormat:0, IsShowLeftText:false}
],
Train:
{
DataCount:20, //训练数据
}
};
this.Create=function() //创建图形
{
var self=this;
$(window).resize(function() { self.OnSize(); }); //绑定窗口大小变化事件
//var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置
//JSChart.SetStyle(blackStyle);
//this.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景
this.OnSize(); //让K线全屏
this.Chart.SetOption(this.Option); //设置K线配置
//注册指标计算完成监听
this.Chart.AddEventCallback({
event:JSCHART_EVENT_ID.RECV_TRAIN_MOVE_STEP,
callback:function(event,data,obj) { self.OnTrainMoveStep(event,data,obj); }
});
}
this.OnTrainMoveStep=function(e, data, obj) //e=注册事件的信息, data=K线训练数据 obj=K线组件
{
console.log('[KLineChart::OnTrainMoveStep] e, data, obj', e, data, obj);
}
this.OnSize=function() //自适应大小调整
{
var height= $(window).height();
var width = $(window).width();
this.DivKLine.style.top='px';
this.DivKLine.style.left='px';
this.DivKLine.style.width=width+'px';
this.DivKLine.style.height=height+'px';
this.Chart.OnSize();
}
this.MoveNextLine=function() //移动到下一个K线上
{
this.Chart.JSChartContainer.MoveNextKLineData();
}
this.buyOrSell=function() //买/卖股票
{
this.Chart.JSChartContainer.BuyOrSell();
}
this.EnableAutoRun=function(bEnable) //开始/停止 自动移动K线
{
if (bEnable) this.Chart.JSChartContainer.Run();
else this.Chart.JSChartContainer.Stop();
}
}
$(function ()
{
WebFont.load({ custom: { families: ['iconfont'] } }); //预加载下iconfont资源
var klineControl=new KLineTrainChart(document.getElementById('kline'));
klineControl.Create();
//setTimeout(function(){ klineControl.EnableAutoRun(true) },5000); //启动自动前进
})
</script>
</body>
</html>
Option的配置项说明
Type: 图形类型, 这里填K线训练或K线训练横屏代表创建一个K线训练图
Train.DataCount 训练几条K数据
其他设置和K线图设置一样
注册K线训练K线移动的监听
Chart.AddEventCallback(obj)
var JSCHART_EVENT_ID=
{
RECV_KLINE_MATCH:1, //接收到形态匹配
RECV_INDEX_DATA:2, //接收指标数据
RECV_HISTROY_DATA:3,//接收到历史数据
RECV_TRAIN_MOVE_STEP:4, //接收K线训练,移动一次K线
}
这里监听事件ID我们使用RECV_TRAIN_MOVE_STEP
监听事件回调 function(event,data,obj)
event 注册的监听事件信息
data K线训练数据 {
TrainDataCount:剩余的训练K线个数(当==0时 训练结束),
BuySellData:买卖数据 ,
Operator:当前可以卖还是买(0=买 1卖),
KLine:K线训练的起始数据 和 结束数据 }
obj K线控件
通过监听事件的回到 你可以更新买/卖按钮, 买卖交易的情况。
K线训练操作接口
- 手动移动到下一个K线 chart.JSChartContainer.MoveNextKLineData();
- 买卖操作 Chart.JSChartContainer.BuyOrSell() K线训练 买卖必须是成对的,也就是说买了以后必须卖, 然后才能再买。
- 自动移动K线 Chart.JSChartContainer.Run()
- 停止自动移动K线 Chart.JSChartContainer.Stop()
如果还有问题可以加交流QQ群: 950092318
HQChart代码地址
地址:https://github.com/jones2000/HQChart