点击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;  //日期 yyyymmddthis.YClose; //前收盘this.Open;   //开盘this.Close;  //收盘价this.High;    //最高this.Low;  //最低this.Vol;   //成交量this.Amount;   //成交金额this.Time;      //mmhh 或者 mmhhssthis.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:5ShowKLine: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>

具体应用案例

HQChart实战教程23 - 点击K线显示历史分钟走势图

个人爱好（模型/摄影)

地出系类 - 千斤顶，烟雾弹

地出系类 - 废弃，千斤顶

HQChart使用教程67 - 鼠标点击K线柱子监听事件相关推荐

HQChart使用教程1- 如何快速创建一个K线图页面
快速创建一个K线图页面 HQChart介绍 demo页面代码 Option的配置项说明 Type Symbol IsAutoUpdate IsShowRightMenu IsShowCorssCurs ...
HQChart使用教程89-最后一根k线倒计时功能
HQChart使用教程89-k线周期倒计时接口需求步骤 1. 开启Y轴倒计时功能 2. 注册倒计时监听事件 3. 倒计时回调函数参数说明 4. 创建一个倒计时的DOM 注意事项交流QQ群: 9 ...
HQChart实战教程23 - 点击K线显示历史分钟走势图
HQChart实战教程23 - 点击K线显示历史分钟走势图需求步骤 1. 注册K线点击监听事件 2. 点击监听函数使用网路回调函数请求历史分钟交流QQ群:950092318 HQChart代码 ...
入门C语言第三话：数组之实战篇——扫雷（进阶版——图形化界面，递归展开，播放音乐与音效，标记取消雷，记录雷的个数，鼠标点击,文末附有完整代码）
文章目录前言每日鸡汤基本思路衔接基础班扫雷准备阶段正文一.雷盘信息的存储 1.设置雷盘11*11与初始化 2.放置雷 3.放置雷周围的信息二.图形化界面 1.创建与初始化窗口 2.加载 ...
获取窗口句柄模拟鼠标点击
一.任务要求. 需要我们编写一个程序能够自动的进行某些鼠标点击的操作.比如某个客户端,我们利用程序,可以自动点击操作. 二.需求分析. 为了实现这种要求,我们必须首先获得需要操作窗口的句柄.其次是点击 ...
java 鼠标单击_不通过鼠标点击，单纯的通过Java代码生成鼠标单击事件
不通过鼠标点击,单纯的通过Java代码生成鼠标单击事件关注:54 答案:3 信息版本:手机版电脑版解决时间 2021-01-13 04:21 提问者少走感情路 2021-01-12 08:3 ...
special effects - 鼠标点击，出现烟花炸裂效果
鼠标点击,出现烟花炸裂效果一. 效果图二. 实现代码一. 效果图二. 实现代码 <!DOCTYPE html> <html><head><meta c ...
python鼠标点击位置_python鼠标点击位置 Python3怎么模拟鼠标点击？
Python3怎么模拟鼠标点击? Python3怎么模拟鼠标点击?最好简单一点的方法 import win32api,win32condef click(x,y): win32api.SetCurso ...
CTreeCtrl::SelectItem 光标模拟鼠标点击
CTreeCtrl::SelectItem 光标模拟鼠标点击 (2010-12-02 17:37:14) 转载▼ 标签: selectitem 光标模拟鼠标分类: C /VC/WM/MFC 我想 ...

HQChart使用教程67 - 鼠标点击K线柱子监听事件