HQChart使用教程96-指标图形双击
HQChart选中图形功能
新版的HQChart增加了鼠标点击选中图形功能，可以选中K线，叠加K线，指标线段等。也支持拖拽指标图形到不同的指标窗口。
步骤
1. 开启鼠标选中功能
默认是关闭的，需要在SetOption里面打开
SelectedChart.EnableSelected 是否开启选中图形
SelectedChart.EnableMoveOn 鼠标移动到图形上是否显示状态
this.Option=
{
Type:'历史K线图', //创建图形类型
...................
SelectedChart:{ EnableSelected: true, EnableMoveOn:true },
....................
}
2. 注册监听图形双击事件
事件ID JSCHART_EVENT_ID.ON_DBCLICK
注册监听事件详见教程 HQChart使用教程5- K线图控件操作函数说明
this.Create=function() //创建图形
{
......................
this.Chart.SetOption(this.Option); //设置K线配置
...................
this.Chart.AddEventCallback(
{
event:JSCHART_EVENT_ID.ON_DBCLICK,
callback:(event, data, chart)=>{ this.OnDBClick(event, data, chart);}
}
);
}
3. 双击事件回调
函数说明
function(event, data, chart)
event 注册的事件信息
data 双击信息
chart hqchart实例
data
双击的信息
下面双击MA指标的，data返回的信息
{
"X": 618, //点击的X轴坐标
"Y": 264, //点击的Y轴坐标
"FrameID": 0, //指标窗口索引, 从0开始
"ClientPos": 1, //点击的大区域 1=窗口区域 0=窗口外部
"Data": { //当前屏x,y的数值
"X": 15, //当前屏x轴数据索引
"Y": 14.53865265169613 //Y轴对应的数值
},
//选中图形信息 如果没有选中图形, 改项为空或不存在
"SelectedChart": {
"Type": 3, //选中图形的类型 3=主图指标 4=叠加指标 类型信息详见JSCHART_DRAGCHART_TYPE_ID枚举
"IndexName": "MA(5,10,20)", //指标名称
"IndexID": "guid730db45d-6f62-390f-4bda-f399edceec71" //指标的唯一ID
}
}
选中图形类型枚举
var JSCHART_DRAGCHART_TYPE_ID=
{
MAIN_KLINE:1,
OVERLAY_KLINE:2,
MAIN_INDEX:3,
OVERLAY_INDEX:4,
OVERLAY_MINUTE:5, //叠加走势图
MAIN_MINUTE:6, //走势图
MAIN_AVERAGE_MINUTE:7, //均线
MAIN_MINUTE_VOL:8 //成交量
};
4. 获取指标信息
主指标直接在WindowIndex数组里面获取
叠加指标通过内部函数GetOverlayIndexByIdentify()传入指标ID来获取
通过获取指标信息以后,外部可以做一些定制化的功能了,如修改指标参数, 修改指标脚本等等.
this.OnDBClick=function(event, data, chart)
{
console.log('[OnDBClick] data, chart', data, chart);
if (data.SelectedChart)
{
if (data.SelectedChart.Type==3) //主图指标
{
var frameIndex=data.FrameID;
var indexInfo=chart.WindowIndex[frameIndex]; //指标信息
console.log('[OnDBClick] main index info', indexInfo);
}
else if (data.SelectedChart.Type==4) //叠加指标
{
var indexInfo=chart.GetOverlayIndexByIdentify(data.SelectedChart.IndexID);
console.log('[OnDBClick] overlay index info', indexInfo);
}
}
}
HQChart代码地址
地址：github.com/jones2000/HQChart
实例代码
<!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" ></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; //弹幕输出控制器
//K线配置信息
this.Option=
{
Type:'历史K线图', //创建图形类型
Windows: //窗口指标
[
{ Index:"MA", Overlay:true, OverlayIndexType:{ Position:1, LineSpace:3 },},
{ Index:"MACD", Modify:true, Change:true, Close:true,Overlay:true, StringFormat:2, OverlayIndexType:{ Position:1, LineSpace:3 }},
{ Index:"VOL", Modify:true,Change:false,Overlay:true, Close:true },
],
SelectedChart:{ EnableSelected: true, EnableMoveOn:true },
OverlayIndex:
[
//{Index:'BOLL', Windows:0 , IsShareY:true,ShowRightText:true },
{Index:'RSI', Windows:0, ShowRightText:true },
//{Index:'MACD', Windows:0, ShowRightText:true },
//{Windows:1, IndexName:"指标ID", Name:"自定义指标", Script:"T2:DYNAINFO(2);T3:DYNAINFO(10);T:MA(C,10);VERTLINE(C>O,0);HORLINE(HIGH>=HHV(HIGH,20),HIGH,1,2);", Identify:"guid_66990",ShowRightText:true }
], //叠加指标
OverlayIndexFrameWidth:1,
DragDownload: { Day:{ Enable:true } , Minute:{ Enable:true }},
Symbol:'000001.sz',
IsAutoUpdate:true, //是自动更新数据
AutoUpdateFrequency:50000, //数据更新频率
//TradeIndex: {Index:'交易系统-BIAS'}, //交易系统
SplashTitle:'加载数据中......',
IsShowRightMenu:true, //右键菜单
//CorssCursorTouchEnd:true,
//IsClickShowCorssCursor:true,
//IsCorssOnlyDrawKLine:true,
CorssCursorInfo: { DateFormatType:3, HPenType:1, VPenType:1 ,VLineType:0, Right:1 },
EnableZoomIndexWindow:true,
KLine: //K线设置
{
DragMode:1, //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
Right:1, //复权 0 不复权 1 前复权 2 后复权
Period:0, //周期 0 日线 1 周线 2 月线 3 年线
MaxReqeustDataCount:3000, //数据个数
MaxRequestMinuteDayCount:5, //分钟数据获取几天数据 默认取5天数据
PageSize:25, //一屏显示多少数据
//Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"], //信息地雷
//Info:["公告"],
IsShowTooltip:true, //是否显示K线提示信息
DrawType:0, //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
//FirstShowDate:20161201,
KLineDoubleClick:false, //禁止双击弹框
RightSpaceCount:1,
ZoomType:1,
//DataWidth:5
ShowKLine:false,
IsShowTooltip:true,
},
StepPixel:0,
KLineTitle: //标题设置
{
IsShowName:true, //不显示股票名称
IsShowSettingInfo:true //不显示周期/复权
},
Border: //边框
{
Left:1, //左边间距
Right:20, //右边间距
Bottom:20, //底部间距
Top:25, //顶部间距
AutoLeft:{ Blank:10, MinWidth:30 },
AutoRight:{ Blank:10, MinWidth:30 },
},
Frame: //子框架设置
[
{
SplitCount:6,StringFormat:0, IsShowLeftText:false,
Custom:
[
{
Type:0,
Position:'right',LineType:1
}
]
},
{ SplitCount:5, IsShowLeftText:false},
{ SplitCount:5, IsShowLeftText:false }
],
ExtendChart: //扩展图形
[
//{Name:'KLineTooltip' }, //手机端tooltip
//{Name:"FrameSplitPaint", LineColor:"rgb(200,0,0)" }
],
Overlay:
[
//{Symbol:'399300.sz', DrawType:0, Color:'rgb(0,0,255)'}
],
};
this.Create=function() //创建图形
{
var self=this;
$(window).resize(function() { self.OnSize( ); }); //绑定窗口大小变化事件
this.OnSize(); //让K线全屏
this.Option.NetworkFilter=(data, callback)=>{ this.NetworkFilter(data, callback); }
this.Chart.SetOption(this.Option); //设置K线配置
this.Chart.AddEventCallback(
{
event:JSCHART_EVENT_ID.ON_DBCLICK,
callback:(event, data, chart)=>{ this.OnDBClick(event, data, chart);}
}
);
}
this.OnDBClick=function(event, data, chart)
{
console.log('[OnDBClick] data, chart', data, chart);
if (data.SelectedChart)
{
if (data.SelectedChart.Type==3) //主图指标
{
var frameIndex=data.FrameID;
var indexInfo=chart.WindowIndex[frameIndex]; //指标信息
console.log('[OnDBClick] main index info', indexInfo);
}
else if (data.SelectedChart.Type==4) //叠加指标
{
var indexInfo=chart.GetOverlayIndexByIdentify(data.SelectedChart.IndexID);
console.log('[OnDBClick] overlay index info', indexInfo);
}
}
}
this.NetworkFilter=function(data, callback)
{
console.log('[NetworkFilter] data', data);
}
this.OnSize=function(option) //自适应大小调整
{
var height= $(window).height()-50;
var width = $(window).width();
//width=50000;
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();
})
</script>
</body>
</html>
<style>
#kline
{
width: 900px;
height:400px;
position: relative;
/*margin-top: 100px;*/
}
</style>
423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
