HQChart使用教程67 - 鼠标点击K线柱子监听事件
点击K线事件
hqchart 支持注册鼠标点击监听事件，鼠标点击点了K线以后触发回调通知外部
点击事件分
- 双击K线事件
- 点击K线事件
不同的需要可以注册对应的监听事件来获取
步骤
1. 注册监听事件
如何注册事件具体看教程 HQChart使用教程5- K线图控件操作函数说明
事件ID
var JSCHART_EVENT_ID=
{
DBCLICK_KLINE:8, //双击K线图
ON_CLICK_CHART_PAINT:23 //点击K线图
}
部分代码
this.Create=function() //创建图形
{
..........
this.Chart.SetOption(this.Option); //设置K线配置
//注册单击K线事件
this.Chart.AddEventCallback(
{
event:JSCHART_EVENT_ID.ON_CLICK_CHART_PAINT,
callback:(event, data, chart)=>{ this.OnClickChartPaint(event, data, chart);}
}
)
//注册双击K线事件
this.Chart.AddEventCallback(
{
event:JSCHART_EVENT_ID.DBCLICK_KLINE,
callback:(event, data, chart)=>{ this.OnDBClickKLine(event, data, chart);}
}
)
}
事件回调函数说明
function(event, data, chart)
参数说明：
event ：事件ID信息
chart: hqchart实例
data: 事件返回的数据
这里重点是data数据，点击K线的信息就存在data里面
具体的结构如下
{
Stock:{Symbol:股票名称, Name:股票代码 } ，
Tooltip:
{
ChartPaint: K线绘制图形示例
Type:数据类型 0=K线数据 1=信息地雷数据， 后续会增加其他的信息地雷的点击数据类型
Data：当前点击的K线数据 HistoryData
}
}
K线数据说明
function HistoryData()
{
this.Date; //日期 yyyymmdd
this.YClose; //前收盘
this.Open; //开盘
this.Close; //收盘价
this.High; //最高
this.Low; //最低
this.Vol; //成交量
this.Amount; //成交金额
this.Time; //mmhh 或者 mmhhss
this.FlowCapital=0; //流通股本
this.Position=null; //持仓量
//期货
this.YFClose=null; //前结算价
this.FClose=null; //结算价
//指数才有的数据
this.Stop; //停牌家数
this.Up; //上涨
this.Down; //下跌
this.Unchanged; //平盘
}
交流QQ群: 950092318
如果还有问题可以加交流QQ群
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>页面行情(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" style="width: 900px;height:400px;position: relative;"></div>
<div>
<span id='button_2'>切换股票</span>
</div>
<div>
<span>输出信息：</span>
<div>
<span id='click_info'>--</span>
</div>
</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上
this.Barrage; //弹幕输出控制器
this.ClearDivDOM=function()
{
var childList = this.DivKLine.childNodes;
for(var i in childList)
{
this.DivKLine.removeChild(childList[i]);
}
}
//K线配置信息
this.Option= {
Type:'历史K线图', //创建图形类型
//Type:'历史K线图横屏',
Windows: //窗口指标
[
{Index:"MA"},
{Index:"MACD", Modify:false,Change:false, Close:false},
{Index:"RSI", Modify:false,Change:false},
],
OverlayIndex:
[
//{ Index:'两融余额', Windows:1 ,Args:[ { Name:'N', Value:5} ] , ShowRightText:false},
//{Index:'MACD', Windows:0 },
//{Index:'MA', Windows:1 }
], //叠加指标
OverlayIndexFrameWidth:1,
Symbol:'600000.sh',
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
ShowKLine:false,
},
Listener:
{
//KeyDown:false,
//Wheel:false
},
EnableFlowCapital:
{
BIT:true
},
KLineTitle: //标题设置
{
IsShowName:true, //不显示股票名称
IsShowSettingInfo:true //不显示周期/复权
},
Border: //边框
{
Left:50, //左边间距
Right:120, //右边间距
Bottom:50, //底部间距
Top:25 //顶部间距
},
OverlayIndex: //叠加指标设置
[
//{Index:'RSI', Windows:1 },
//{Windows:0, IndexName:"指标ID", Name:"自定义指标", Script:"T:MA(O,20);", Identify:"guid_66990"}
],
Frame: //子框架设置
[
{
SplitCount:6,StringFormat:0, IsShowLeftText:false,
//YCoordinateType:2,
//IsYReverse:true,
IsShowYLine:false,
SplitType:1,
Custom:
[
{
Type:0,
Position:'right',LineType:2,
}
]
},
{ SplitCount:3,StringFormat:0, IsShowLeftText:false, IsShowXLine:false },
{ SplitCount:2,StringFormat:0, IsShowLeftText:false, IsShowYLine:false }
],
ExtendChart: //扩展图形
[
//{Name:'KLineTooltip' } //手机端tooltip
],
Overlay:
[
// {Symbol:'399300.sz', DrawType:1, Color:'rgb(0,0,255)'}
],
};
this.Create=function() //创建图形
{
var self=this;
//$(window).resize(function() { self.OnSize( {Type:1} ); }); //绑定窗口大小变化事件
$(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.ON_CLICK_CHART_PAINT,
callback:(event, data, chart)=>{ this.OnClickChartPaint(event, data, chart);}
}
)
this.Chart.AddEventCallback(
{
event:JSCHART_EVENT_ID.DBCLICK_KLINE,
callback:(event, data, chart)=>{ this.OnDBClickKLine(event, data, chart);}
}
)
}
this.OnDBClickKLine=function(event, data, chart)
{
console.log('[KLineChart::OnDBClickKLine] event, data', event , data);
var text='双击K线事件 '+ this.GetClickInfo(data);
$("#click_info").text(text);
}
this.OnClickChartPaint=function(event, data, chart)
{
console.log('[KLineChart::OnClickChartPaint] event, data', event , data);
var text='单击K线事件 '+ this.GetClickInfo(data);
$("#click_info").text(text);
}
this.GetClickInfo=function(data)
{
var text="";
if (data.Stock)
{
var stock=`[${data.Stock.Name},${data.Stock.Symbol}] `;
text+=stock;
}
if(data.Tooltip && data.Tooltip.Data && data.Tooltip.Type==0) //点中的K线数据
{
var kItem=data.Tooltip.Data;
var stock=`[日期:${kItem.Date}] `;
text+=stock;
if (ChartData.IsMinutePeriod(this.Chart.JSChartContainer.Period,true))
{
stock=`[时间:${kItem.Time}] `;
text+=stock;
}
stock=`[开:${kItem.Open}] [收${kItem.Close}] [高${kItem.High}] [低${kItem.Low}] `;
text+=stock;
}
return text;
}
this.OnSize=function(option) //自适应大小调整
{
var height= $(window).height()-80;
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)
{
var resource=JSChart.GetResource(); //获取全局资源
//resource.UpBarColor='rgb(0,0,205)'; //修改部分资源
//this.Chart.ReloadResource({Resource:null}); //重新加载全局资源
this.Chart.ChangeSymbol(symbol);
}
}
$(function ()
{
WebFont.load({ custom: { families: ['iconfont'] } }); //预加载下iconfont资源
var klineControl=new KLineChart(document.getElementById('kline'));
klineControl.Create();
$("#button_2").click(function() { klineControl.ChangeSymbol("600006.sh"); } );
})
</script>
</body>
</html>
<style>
/*
.klineframe-toolbar
{
color:rgb(238,233,233);
}
.klineframe-toolbar span:hover
{
color: #0182d4;
}
*/
</style>
具体应用案例
个人爱好（模型/摄影)
地出系类 - 千斤顶，烟雾弹
地出系类 - 废弃， 千斤顶
扫一扫
1530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
