HQChart使用教程82-动态修改叠加指标参数
叠加指标参数
hqchart目前UI上没有修改叠加指标参数按钮，如果你需要增加叠加指标参数修改按钮是自己做一个div放到每个指标窗口上，具体可以看教程HQChart使用教程80-自定义指标标题信息
步骤
10126 以后的版本才支持
1. 获取所有叠加指标实例
叠加指标存放在每个窗口框架OverlayIndex变量里面,是一个数组, 可以存放多个叠加指标.
下面是主要用到的成员变量说明:
Identify : 叠加指标的ID
Script.Arguments : 参数数组
Script.Name : 指标名字
this.ModifyOverlayIndex=function(id)
{
var chart=this.Chart.JSChartContainer; //获取内部K线控件
var aryOverlayIndex=[];
for(var i=0; i<chart.Frame.SubFrame.length; ++i) //遍历获取所有的叠加指标
{
var item=chart.Frame.SubFrame[i];
if (!item.OverlayIndex) continue;
for(var j=0;j<item.OverlayIndex.length; ++j)
{
var overlayItem=item.OverlayIndex[j];
console.log("[KLineChart::ModifyOverlayIndex] Name, Arguments, Identify, ", overlayItem.Script.Name, overlayItem.Script.Arguments, overlayItem.Identify);
aryOverlayIndex.push(overlayItem);
}
}
...........................................
}
2. 修改你需要的指标参数
修改参数的值(Value)
var item=aryOverlayIndex[id];
item.Script.Arguments[0].Value+=1;
item.Script.Arguments[1].Value+=1;
3. 更新修改的叠加指标
调用UpdateOverlayIndex(叠加指标ID)更新指标
var item=aryOverlayIndex[id];
item.Script.Arguments[0].Value+=1;
item.Script.Arguments[1].Value+=1;
chart.UpdateOverlayIndex(item.Identify);
完整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 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>K线图-修改叠加指标参数</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" ></div>
<div>
<span id='button_1'>修改叠加指标1</span>
<span id='button_2'>修改叠加指标2</span>
<span id='button_3'>修改叠加指标3</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>
//简单的把K线控件封装下
function KLineChart(divKLine)
{
this.DivKLine=divKLine;
this.Chart=JSChart.Init(divKLine); //把K线图绑定到一个Div上
this.Barrage; //弹幕输出控制器
this.ClearDivDOM=function()
{
var childList = this.DivKLine.childNodes;
for(var i in childList)
{
this.DivKLine.removeChild(childList[i]);
}
}
this.ModifyOverlayIndex=function(id)
{
var chart=this.Chart.JSChartContainer; //获取内部K线控件
var aryOverlayIndex=[];
for(var i=0; i<chart.Frame.SubFrame.length; ++i)
{
var item=chart.Frame.SubFrame[i];
if (!item.OverlayIndex) continue;
for(var j=0;j<item.OverlayIndex.length; ++j)
{
var overlayItem=item.OverlayIndex[j];
console.log("[KLineChart::ModifyOverlayIndex] Name, Arguments, Identify, ", overlayItem.Script.Name, overlayItem.Script.Arguments, overlayItem.Identify);
aryOverlayIndex.push(overlayItem);
}
}
if (id==0)
{
var item=aryOverlayIndex[id];
item.Script.Arguments[0].Value+=1;
item.Script.Arguments[1].Value+=1;
chart.UpdateOverlayIndex(item.Identify);
}
else if (id==1)
{
var item=aryOverlayIndex[id];
item.Script.Arguments[0].Value+=1;
chart.UpdateOverlayIndex(item.Identify);
}
else if (id==2)
{
var item=aryOverlayIndex[id];
item.Script.Arguments[0].Value+=1;
item.Script.Arguments[1].Value+=1;
chart.UpdateOverlayIndex(item.Identify);
}
else
{
return;
}
}
//K线配置信息
this.Option= {
Type:'历史K线图', //创建图形类型
Windows: //窗口指标
[
{Index:'MA', Change:true,IsShowOverlayIndexName:true, Overlay:true },
{Index:"VOL", Modify:false,Change:false,Overlay:true },
],
OverlayIndex:
[
{Windows:0, IndexName:"指标ID", Name:"自定义指标", Script:"T:MA(O,TT1+TT2);", Args:[ { Name:'TT1', Value:5}, { Name:'TT2', Value:10 }], ShowRightText:false},
{Index:'BOLL', Windows:0, IsShareY:true,ShowRightText:false },
{Index:'RSI', Windows:1 ,ShowRightText:false},
], //叠加指标
Symbol:'600000.sh',
IsAutoUpdate:true, //是自动更新数据
AutoUpdateFrequency:10000, //数据更新频率
//TradeIndex: {Index:'交易系统-BIAS'}, //交易系统
SplashTitle:'',
IsShowRightMenu:true, //右键菜单
//CorssCursorTouchEnd:true,
//IsClickShowCorssCursor:true,
//IsCorssOnlyDrawKLine:true,
CorssCursorInfo: { DateFormatType:3, HPenType:1, VPenType:1 },
KLine: //K线设置
{
DragMode:1, //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
Right:1, //复权 0 不复权 1 前复权 2 后复权
Period:0, //周期 0 日线 1 周线 2 月线 3 年线
MaxReqeustDataCount:3000, //数据个数
MaxRequestMinuteDayCount:5, //分钟数据获取几天数据 默认取5天数据
PageSize:50, //一屏显示多少数据
IsShowTooltip:true, //是否显示K线提示信息
DrawType:0, //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
//FirstShowDate:20161201,
KLineDoubleClick:false, //禁止双击弹框
RightSpaceCount:3,
ZoomType:1,
StepPixel:10,
//DataWidth:5
ShowKLine:false,
IsShowTooltip:true,
},
KLineTitle: //标题设置
{
IsShowName:true, //不显示股票名称
IsShowSettingInfo:true //不显示周期/复权
},
Border: //边框
{
Left:80, //左边间距
Right:80, //右边间距
Bottom:25, //底部间距
Top:25 //顶部间距
},
Frame: //子框架设置
[
{ SplitCount:6 },
{ SplitCount:5 },
{ SplitCount:4 }
],
ExtendChart: //扩展图形
[
//{Name:'KLineTooltip' }, //手机端tooltip
],
};
this.Create=function() //创建图形
{
var self=this;
//$(window).resize(function() { self.OnSize( {Type:1} ); }); //绑定窗口大小变化事件
$(window).resize(function() { self.OnSize( ); }); //绑定窗口大小变化事件
this.OnSize(); //让K线全屏
this.Option.NetworkFilter=(data, callback)=>{ this.NetworkFilter(data, callback); }
this.Chart.SetOption(this.Option); //设置K线配置
}
this.NetworkFilter=function(data, callback)
{
console.log('[KLineChart::NetworkFilter] data', data);
}
this.OnSize=function(option) //自适应大小调整
{
var height= $(window).height()-50;
var width = $(window).width();
this.DivKLine.style.top='0px';
this.DivKLine.style.left='0px';
this.DivKLine.style.width=width+'px';
this.DivKLine.style.height=height+'px';
this.Chart.OnSize(option);
}
this.ChangeSymbol=function(symbol)
{
this.Chart.ChangeSymbol(symbol);
}
}
$(function ()
{
WebFont.load({ custom: { families: ['iconfont'] } }); //预加载下iconfont资源
var klineControl=new KLineChart(document.getElementById('kline'));
klineControl.Create();
$("#button_1").click(function() { klineControl.ModifyOverlayIndex(0); } );
$("#button_2").click(function() { klineControl.ModifyOverlayIndex(1); } );
$("#button_3").click(function() { klineControl.ModifyOverlayIndex(2); } );
})
</script>
</body>
</html>
<style>
#kline
{
width: 900px;
height:400px;
position: relative;
/*margin-top: 100px;*/
}
</style>
交流QQ群: 950092318
如果还有问题可以加交流QQ群: 950092318
HQChart代码地址
地址：github.com/jones2000/HQChart
