HQChart使用教程6- 如何获取K线图上的指标数据进行回测

对指标的数据进行统计或回测是验证指标是否有效的一个重要功能，一般这些功能都会由服务器进行计算，返回给前端。对于一些简单指标统计计算是可以由客户端计算的，毕竟现在的手机性能已经和强大了。这章我们介绍如果从K线图中获取指标数据并进行统计

简单的前端单股票回测demo
https://opensource.zealink.com/hqweb/backcheckindex/index.html

注册指标计算完成监听事件

Chart.AddEventCallback(obj)

obj { event:事件ID, callback:回调函数 }

这里我们使用 RECV_INDEX_DATA（主图指标监听事件） 或者 RECV_OVERLAY_INDEX_DATA（叠加指标监听事件） 这个监听事件， 并绑定一个回调函数
注册监听事件详见教程:HQChart使用教程5- K线图控件操作函数说明

我们使用第1章的测试demo， 再KLineChart类里增加函数处理指标数据统计的函数，并再Create() 函数里注册监听事件回调绑定这个函数

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_INDEX_DATA, 
           callback:function(event,data,obj) { self.AnalysisData(event,data,obj); }
       });
   }

   this.AnalysisData=function(e, data, obj)    //e=注册事件的信息, data=指标计算完成的数据 obj=麦语法执行类
   {
   		//打印下接收到的事件数据
       console.log('[KLineChart::AnalysisData] e, data, obj', e, data, obj);
   }

指标结果数据结构说明

指标注册回调函数function(e, data, obj) 一共3个参数， 最主要的就是第2个 data它是存储的是指标结果数据, 结果是基于指标的脚本返回的数据。
我们这里用第2章的BS指标 看下 指标麦语法脚本（具体的语法可以参看通达信， 东方财富，同花顺指标帮助）输出 与 data的存储结果数据的对应关系

B1:=WEEK==1;
S1:=WEEK==5;
MA10:MA(C,10);
DRAWICON(B1,L*0.97,13);  //13是买图标， 显示在最低价下
DRAWICON(S1,H*1.03,14);  //14是卖图标， 显示在最高价上

上面脚本 我们可以看到最后输出的是3个变量数据
MA10,DRAWICON, DRAWICON, 后面2个DRAWICON是画图标的函数， 我们看打印下data的数据信息见下图

Arguments: 指标参数
HistoryData 股票的历史K线数据
Name 指标名称
OutVar 指标计算完成数据的结果数据
Stock 当前股票代码 股票名称
WindowIndex 指标窗口索引

现在我们只需要data.OutVar 对指标数据进行统计， 如果要算指标净值什么的， 可以再用上data.HistoryData当前股票的K线数据， 来模拟每天的买卖，计算持仓及净值。

简单的前端回测计算类(RegressionTest)

我们这里提供一个简单的单股票单指标的BS点回测类(RegressionTest)， 文件在（jscommon\umychart.regressiontest.js),

/*
    指标回测
    计算: Trade: {Count 交易次数  Days:交易天数 Success:成功交易次数 Fail:失败交易次数}
          Day: {Count:总运行  Max:最长运行 Min:最短运行 Average:平均运行}
          Profit: 总收益 StockProfit:个股收益  Excess:超额收益 MaxDropdown:最大回撤 Beta:β(Beta)系数(指标里面需要又大盘数据)
          NetValue: [ {Date:日期, Net:净值, Close:股票收盘价, IndexClose:大盘的收盘价}, ]
*/
function RegressionTest()
{
	//只读数据不能修改
    this.HistoryData;   //K线数据
    this.BuyData;       //策略买数据
    this.SellData;      //策略卖数据
    this.IndexClose;    //大盘收盘价
    this.NetCalculateModel=0;   //净值及收益计算模型 0=使用B点开盘价计算 1=使用B点下一天的开盘价计算

    this.InitialCapital=10000;  //初始资金1W
.....
}

只要把指标返回的data数据中的， K线数据，策略买数据，策略卖数据，大盘收盘价（可选） 绑定到RegressionTest类中就可以进行计算了， 然后再把回测结果显示再页面上用echart做一个可视化展示，一个简单的回测就做完了，是不是很简单呢。下图是我们的一个demo展示。
如果还有问题可以加交流QQ群: 950092318

HQChart代码地址

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