您现在的位置是：主页 > news > 网站标题滚动/网站建站推广

网站标题滚动/网站建站推广

admin2025/5/5 23:43:04【news】

简介网站标题滚动,网站建站推广,高校官方网站建设,合肥做英文网站HQChart使用教程67 - 鼠标点击K线柱子监听事件点击K线事件步骤1. 注册监听事件事件回调函数说明参数说明：K线数据说明交流QQ群: 950092318HQChart代码地址示例完整代码具体应用案例个人爱好（模型/摄影)点击K线事件 hqchart 支持注册鼠标点击监听事件&am…

网站标题滚动,网站建站推广,高校官方网站建设,合肥做英文网站HQChart使用教程67 - 鼠标点击K线柱子监听事件点击K线事件步骤1. 注册监听事件事件回调函数说明参数说明：K线数据说明交流QQ群: 950092318HQChart代码地址示例完整代码具体应用案例个人爱好（模型/摄影)点击K线事件 hqchart 支持注册鼠标点击监听事件&am…

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

  • 点击K线事件
  • 步骤
    • 1. 注册监听事件
    • 事件回调函数说明
      • 参数说明：
      • K线数据说明
  • 交流QQ群: 950092318
  • HQChart代码地址
  • 示例完整代码
  • 具体应用案例
  • 个人爱好（模型/摄影)

点击K线事件

hqchart 支持注册鼠标点击监听事件，鼠标点击点了K线以后触发回调通知外部
点击事件分

  1. 双击K线事件
  2. 点击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线显示历史分钟走势图

个人爱好（模型/摄影)

地出系类 - 千斤顶，烟雾弹
在这里插入图片描述
地出系类 - 废弃， 千斤顶
在这里插入图片描述
在这里插入图片描述

相关文章

最新文章