HQChart使用教程64-前端自定义周期算法接口
前端计算周期
前端可以通过1分钟或日线数据来合并其他周期的数据,如周线,5分钟线等等。这样的好处就是后台只需要提供基础周期的,其他周期都全部由前端完成。 周期计算的方法个不相同,hqchart提供外部注册周期计算函数来替换内部提供的周期计算函数
外部注册周期方法接口
注册周期计算回调
JSChart.AddPeriodCallback(obj)
obj={ Period:周期ID, Callback:回调 }
删除已注册的周期计算回调
JSChart.RemovePeriodCallback(obj)
obj={ Period:周期ID, }
周期计算回调函数格式
this.PeriodCalculate=function(period, data, dataObj) //自定义计算周期 period周期ID, data 1分钟数据/日线数据
{
.........
}
JSChart.AddPeriodCallback({Period:2, Callback:klineControl.PeriodCalculate} ); //2=月线 注册自定义月线周期计算函数
VUE调用
增加命名空间就可以
import HQChart from 'hqchart'
import 'hqchart/src/jscommon/umychart.resource/css/tools.css'
import 'hqchart/src/jscommon/umychart.resource/font/iconfont.css'
......
mounted:function()
{
HQChart.Chart.JSChart.AddPeriodCallback(.....)
}
完成例子代码
<!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 name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义周期计算</title>
<!-- 加载资源 -->
<link rel="stylesheet" href="../jscommon/umychart.resource/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>
<div>
<span id='button_5'>10分钟</span>
<span id='button_4'>5分钟</span>
<span id='button_3'>周线</span>
<span id='button_1'>月线</span>
<span id='button_2'>切换股票</span>
</div>
<script src="content/js/jquery.min.js"></script>
<script src="content/js/webfont.js"></script>
<script src='../jscommon/umychart.console.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>
//JSConsole.Chart.Log=() =>{}
//JSConsole.Complier.Log=()=>{}
//MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol) { return 2; }
//简单的把K线控件封装下
function KLineChart(divKLine)
{
this.DivKLine=divKLine;
this.Chart=JSChart.Init(divKLine); //把K线图绑定到一个Div上
//K线配置信息
this.Option= {
Type:'历史K线图', //创建图形类型
//Type:'历史K线图横屏',
Windows: //窗口指标
[
//{Index:"EMPTY"},
{Index:"MA", Modify:true,Change:false},
//{Index:"两融余额2", Args:[ { Name:'N', Value:5} ], IsShowIndexName:false, Modify:true,Change:true},
//{Index:"JCL", Modify:false,Change:true},
{Index:"MACD2", Modify:true,Change:false},
{Index:"MACD", Modify:true,Change:false},
//{Index:"RSI", Modify:false,Change:false},
],
Symbol:'000001.sz',
IsAutoUpdate:true, //是自动更新数据
AutoUpdateFrequency:10000, //数据更新频率
//TradeIndex: {Index:'交易系统-BIAS'}, //交易系统
IsShowRightMenu:true, //右键菜单
//CorssCursorTouchEnd:true,
//IsCorssOnlyDrawKLine:true,
KLine: //K线设置
{
DragMode:1, //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
Right:1, //复权 0 不复权 1 前复权 2 后复权
Period:0, //周期 0 日线 1 周线 2 月线 3 年线
MaxReqeustDataCount:1000, //数据个数
MaxRequestMinuteDayCount:10, //分钟数据取5天
PageSize:50, //一屏显示多少数据
//Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"], //信息地雷
IsShowTooltip:false, //是否显示K线提示信息
DrawType:0, //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
//FirstShowDate:20161201,
KLineDoubleClick:false, //禁止双击弹框
RightSpaceCount:5,
ZoomType:1,
StepPixel:10,
DataWidth:5
},
KLineTitle: //标题设置
{
IsShowName:true, //不显示股票名称
IsShowSettingInfo:true //不显示周期/复权
},
Border: //边框
{
Left:1, //左边间距
Right:60, //右边间距
Bottom:50, //底部间距
Top:25 //顶部间距
},
Frame: //子框架设置
[
{
SplitCount:6,StringFormat:0, IsShowLeftText:false,YCoordinateType:0,IsYReverse:true
},
{
SplitCount:3,StringFormat:0, IsShowLeftText:false
},
{SplitCount:2,StringFormat:0, IsShowLeftText:false}
],
ExtendChart: //扩展图形
[
//{Name:'KLineTooltip' } //手机端tooltip
]
};
this.Create=function() //创建图形
{
var self=this;
$(window).resize(function() { self.OnSize( {Type:1} ); }); //绑定窗口大小变化事件
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.OnSize=function(option) //自适应大小调整
{
var height= $(window).height()-50;
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(option);
}
this.ChangeSymbol=function(symbol)
{
this.Chart.ChangeSymbol(symbol);
}
this.ChangePeriod=function(period)
{
this.Chart.ChangePeriod(period);
}
this.PeriodCalculate=function(period, data, dataObj) //自定义计算周期 period周期ID, data 1分钟数据/日线数据
{
console.log("[KLineChart::PeriodCalculate] period, data", period, data);
var result = [];
var periodDataCount=5;
if (period==2) //月线
{
periodDataCount=20;
}
else if (period==5) //5分钟
{
periodDataCount=5;
}
var bFirstPeriodData = false;
var newData = null;
var preTime=null; //上一次的计算时间
for (var i = 0; i < data.length; )
{
bFirstPeriodData = true;
for (var j = 0; j < periodDataCount && i < data.length; ++i)
{
if (bFirstPeriodData)
{
newData = new HistoryData();
result.push(newData);
bFirstPeriodData = false;
}
var minData = data[i];
if (minData == null)
{
++j;
continue;
}
++j;
newData.Date = minData.Date;
newData.Time = minData.Time;
preTime=newData.Time;
if (minData.Open==null || minData.Close==null)
continue;
if (newData.Open==null || newData.Close==null)
{
newData.Open=minData.Open;
newData.High=minData.High;
newData.Low=minData.Low;
newData.YClose=minData.YClose;
newData.Close=minData.Close;
newData.Vol=minData.Vol;
newData.Amount=minData.Amount;
newData.FlowCapital=minData.FlowCapital;
newData.Position=minData.Position;
}
else
{
if (newData.High<minData.High)
newData.High=minData.High;
if (newData.Low>minData.Low)
newData.Low=minData.Low;
newData.Close=minData.Close;
newData.Vol+=minData.Vol;
if (minData.Amount!=null) newData.Amount+=minData.Amount;
newData.Position=minData.Position;
newData.FlowCapital=minData.FlowCapital;
}
}
}
return result;
}
}
$(function ()
{
WebFont.load({ custom: { families: ['iconfont'] } }); //预加载下iconfont资源
var klineControl=new KLineChart(document.getElementById('kline'));
JSChart.AddPeriodCallback({Period:2, Callback:klineControl.PeriodCalculate} ); //2=月线
JSChart.AddPeriodCallback({Period:5, Callback:klineControl.PeriodCalculate} ); //5=5分钟
klineControl.Create();
$("#button_1").click(function() { klineControl.ChangePeriod(2); } );
$("#button_3").click(function() { klineControl.ChangePeriod(1); } );
$("#button_4").click(function() { klineControl.ChangePeriod(5); } );
$("#button_5").click(function() { klineControl.ChangePeriod(6); } );
$("#button_2").click(function() { klineControl.ChangeSymbol("600000.sh"); } );
})
</script>
</body>
</html>
<style>
/*
.klineframe-toolbar
{
color:rgb(238,233,233);
}
.klineframe-toolbar span:hover
{
color: #0182d4;
}
*/
</style>