HQChart实战教程7-自定义显示手势点击K线显示信息

最新推荐文章于 2022-07-12 07:46:03 发布

HQChart

最新推荐文章于 2022-07-12 07:46:03 发布

阅读量1.8k

点赞数 1

分类专栏： HQChart JavaScript 文章标签： hqchart K线图 kline 股票量化

本文链接：https://blog.csdn.net/jones2000/article/details/104168610

版权

HQChart 同时被 2 个专栏收录

164 篇文章 98 订阅

订阅专栏

JavaScript

151 篇文章 33 订阅

订阅专栏

HQChart实战教程7-自定义显示手势点击K线显示信息

标题绘制事件
- 回调数据
接收绘制标题事件
完整实例代码
分时图代码样例PC端
详细自定义tooltip教程(付费)
交流QQ群: 950092318
HQChart代码地址

标题绘制事件

AddEventCallback() 注册K线图事件监听事件（HQChart使用教程5- K线图控件操作函数说明）
监听一下事件就可以。
JSCHART_EVENT_ID.ON_TITLE_DRAW 标题绘制事件

 this.Chart.AddEventCallback({event:JSCHART_EVENT_ID.ON_TITLE_DRAW, callback:(event, data, obj)=>{ this.UpdateTitle(event, data, obj); }});

回调数据

data :
{
Draw:当前K线或分时数据 , DataIndex:当前数据索引, DataCount:数据个数 ,
OverlayStock:[{Symbol:叠加股票代码, Name:叠加股票名字}, …]
}
叠加股票信息需要版本10242以后的才有这个数据

接收绘制标题事件

在页面中建一个div用来显示K线信息
在监听事件回调函数中更新div的信息

1.移动端

下面是移动端判断当手势离开屏幕div消息

<div id='klinetitle'>
    <span >隐藏</span>
</div>
<div id="kline" style="width: 900px;height:400px;position: relative;"></div>
.......

this.UpdateTitle=function(event, data, obj)
{
     console.log('[KLineChart::UpdateTitle]', data);
     var klineItem=data.Draw;

     var title='<span>隐藏</span>';
     if (this.Chart.JSChartContainer.IsOnTouch==true && event.FunctionName=='DrawDynamicInfo') //手是否在屏幕上
     {
     	//自定义显示的内容和UI
         title=`<span>开:${klineItem.Open.toFixed(2)}, 收:${klineItem.Close.toFixed(2)}</span>`;
     }

     this.DivTitle.innerHTML=title;
 }

PC端

PC端判断不是是否在K线框架内。

this.UpdateTitle=function(event, data, obj)
 {
      console.log('[KLineChart::UpdateTitle]', data);
      var klineItem=data.Draw;
      
      if (event.FunctionName=='DrawDynamicInfo' && event.PointPosition>=0) //PC端 判断鼠标否在屏幕上
      {
          title=`<span>开:${klineItem.Open.toFixed(2)}, 收:${klineItem.Close.toFixed(2)}</span>`;
      }

      this.DivTitle.innerHTML=title;
  }

uniapp

k线图

CreateKLineChart_app()
{
	if (g_KLine.JSChart) return;
	
	let element = new JSCommon.JSCanvasElement();
	// #ifdef APP-PLUS
	element.IsUniApp=true;	//canvas需要指定下 是uniapp的app
	// #endif
	element.ID = 'kline2';
	element.Height = this.ChartHeight;  //高度宽度需要手动绑定!!
	element.Width = this.ChartWidth;
	
	var blackStyle=JSCommonHQStyle.GetStyleConfig(JSCommonHQStyle.STYLE_TYPE_ID.BLACK_ID);
	//blackStyle.DefaultTextColor='rgb(255,0,255)';
	
	JSCommon.JSChart.SetStyle(blackStyle);		
	g_KLine.JSChart = JSCommon.JSChart.Init(element);
	this.KLine.Option.NetworkFilter=this.NetworkFilter;
	this.KLine.Option.Symbol=this.Symbol;
	this.KLine.Option.IsClickShowCorssCursor=true;
	this.KLine.Option.IsFullDraw=true; 
	g_KLine.JSChart.SetOption(this.KLine.Option);
	
	g_KLine.JSChart.AddEventCallback({ event: JSCommon.JSCHART_EVENT_ID.ON_TITLE_DRAW, callback: this.OnTitleDraw });
},

OnTitleDraw(event, data, obj)	//K线信息
{
	console.log('[OnTitleDraw]', event, data);
	if (!data.Draw) 
	{
		this.TestData="隐藏";
	}
	else
	{
		var item=data.Draw;
		this.TestData=`日期:${item.Date} 收:${item.Close}`;
	}
},

走势图

CreateMinuteChart_app()
{
if (g_Minute.JSChart) return;

var element = new JSCommon.JSCanvasElement();
// #ifdef APP-PLUS
element.IsUniApp=true;	//canvas需要指定下 是uniapp的app
// #endif
element.ID = 'minute2';
element.Height = this.ChartHeight;  //高度宽度需要手动绑定!!
element.Width = this.ChartWidth;
	
//用黑色风格
var blackStyle=JSCommonHQStyle.GetStyleConfig(JSCommonHQStyle.STYLE_TYPE_ID.BLACK_ID);	
JSCommon.JSChart.SetStyle(blackStyle);
		
g_Minute.JSChart = JSCommon.JSChart.Init(element);
this.Minute.Option.NetworkFilter=this.NetworkFilter;
this.Minute.Option.Symbol=this.Symbol;
this.Minute.Option.IsFullDraw=true; 
g_Minute.JSChart.SetOption(this.Minute.Option);

g_Minute.JSChart.AddEventCallback({ event: JSCommon.JSCHART_EVENT_ID.ON_TITLE_DRAW, callback: this.OnMinuteTitleDraw });
},

OnMinuteTitleDraw(event, data, obj)	//分时图信息
{
	console.log('[OnMinuteTitleDraw]', event, data);
	if (!data.Draw) 
	{
		this.TestData="隐藏";
	}
	else 
	{
		var item=data.Draw;
		this.TestData=`时间:${item.Time} 价格:${item.Close}`;
	}
},

完整实例代码

测试页面地址

<!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线标题(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='klinetitle'>
        <span >隐藏</span>
    </div>
    <div id="kline" style="width: 900px;height:400px;position: relative;"></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=()=>{}
        
        //简单的把K线控件封装下
        function KLineChart(divKLine)
        {
            this.DivKLine=divKLine;
            this.Chart=JSChart.Init(divKLine);   //把K线图绑定到一个Div上
            this.DivTitle=document.getElementById('klinetitle');

            //K线配置信息
            this.Option= {
                Type:'历史K线图',   //创建图形类型
                
                Windows: //窗口指标
                [
                    {Index:"MA", Modify:false,Change:false},
                    {Index:"VOL", Modify:false,Change:false},
                ], 

                Symbol:'600000.sh',
                IsAutoUpdate:true,       //是自动更新数据
                //TradeIndex: {Index:'交易系统-BIAS'},    //交易系统
    
                IsShowRightMenu:false,          //右键菜单
                CorssCursorTouchEnd: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:true,                 //是否显示K线提示信息
                    DrawType:0      //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
                },
    
                KLineTitle: //标题设置
                {
                    IsShowName:true,       //不显示股票名称
                    IsShowSettingInfo:true //不显示周期/复权
                },
    
                Border: //边框
                {
                    Left:5,         //左边间距
                    Right:60,       //右边间距
                    Bottom:25,      //底部间距
                    Top:1          //顶部间距
                },
                
                Frame:  //子框架设置
                [
                    {SplitCount:3,StringFormat:0, IsShowLeftText:false},
                    {SplitCount:2,StringFormat:0, IsShowLeftText:false},
                    {SplitCount:2,StringFormat:0, IsShowLeftText: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(); });    //绑定窗口大小变化事件

                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_TITLE_DRAW, callback:(event, data, obj)=>{ this.UpdateTitle(event, data, obj); }});
            }

            this.OnSize=function()  //自适应大小调整
            {
                var height= $(window).height();
                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();
            }

            this.UpdateTitle=function(event, data, obj)
            {
                console.log('[KLineChart::UpdateTitle]', data);
                var klineItem=data.Draw;

                var title='<span>隐藏</span>';
                if (this.Chart.JSChartContainer.IsOnTouch==true && event.FunctionName=='DrawDynamicInfo') //手是否在屏幕上
                {
                    title=`<span>开:${klineItem.Open.toFixed(2)}, 收:${klineItem.Close.toFixed(2)}</span>`;
                }

                this.DivTitle.innerHTML=title;
            }
        }

        $(function () 
        {
            WebFont.load({ custom: { families: ['iconfont'] } });   //预加载下iconfont资源

            var klineControl=new KLineChart(document.getElementById('kline'));
            klineControl.Create();
        })

    </script>  
</body>  
</html>



<style>

    
</style>

分时图代码样例PC端

<!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线标题(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='klinetitle'>
        <span >隐藏</span>
    </div>
    <div id="kline" style="width: 900px;height:400px;position: relative;"></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=()=>{}
        
        //简单的把K线控件封装下
        function KLineChart(divKLine)
        {
            this.DivKLine=divKLine;
            this.Chart=JSChart.Init(divKLine);   //把K线图绑定到一个Div上
            this.DivTitle=document.getElementById('klinetitle');

            //K线配置信息
            this.Option= {
                Type:'分钟走势图',   //创建图形类型

                Windows: //窗口指标
                [
                    {Index:"MACD", Modify:false, Change:false, Close:false }
                ], 
                
                Symbol:'000001.sz',         // cf1909.czc
                IsAutoUpdate:true,          //是自动更新数据
                DayCount:1,                 //1 最新交易日数据 >1 多日走势图
                IsShowRightMenu:true,       //是否显示右键菜单

                //CorssCursorInfo:{ IsOnlyDrawMinute:true , Left:2, Right:2},
    
                MinuteLine:
                {
                    IsDrawAreaPrice:true,       //是否画价格面积图
                    IsShowAveragePrice:false,   //不显示均线
                },
    
                Border: //边框
                {
                    Left:1,    //左边间距
                    Right:1,     //右边间距
                    Top:1,
                    Bottom:50
                },
                
                Frame:  //子框架设置
                [
                    { SplitCount:5, Height:30, IsShowLeftText:true , RightTextFormat:1 },
                    //{ SplitCount:4, Height:0, IsShowLeftText:false, IsShowRightText:false },
                ],

                Listener:
                {
                    //KeyDown:false,
                    //Wheel:false
                },

                Overlay:    //叠加股票 目前只支持1只股票
                [
                    //{Symbol:'000001.sh'}
                ],

                ExtendChart:    //扩展图形
                [
                    //{Name:'MinuteTooltip' }  //手机端tooltip
                ]
            };
                 
            this.Create=function()  //创建图形
            {
                var self=this;
                $(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_TITLE_DRAW, callback:(event, data, obj)=>{ this.UpdateTitle(event, data, obj); }});
            }

            this.OnSize=function()  //自适应大小调整
            {
                var height= $(window).height();
                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();
            }

            this.UpdateTitle=function(event, data, obj)
            {
                console.log('[KLineChart::UpdateTitle]', data);
                var klineItem=data.Draw;

                var title='<span>隐藏</span>';
                //if (this.Chart.JSChartContainer.IsOnTouch==true && event.FunctionName=='DrawDynamicInfo') //手是否在屏幕上
                {
                    title=`<span>开:${klineItem.Open.toFixed(2)}, 收:${klineItem.Close.toFixed(2)}</span>`;
                }

                this.DivTitle.innerHTML=title;
            }
        }

        $(function () 
        {
            WebFont.load({ custom: { families: ['iconfont'] } });   //预加载下iconfont资源

            var klineControl=new KLineChart(document.getElementById('kline'));
            klineControl.Create();
        })

    </script>  
</body>  
</html>



<style>

    
</style>

详细自定义tooltip教程(付费)

交流QQ群: 950092318

HQChart代码地址

地址：https://github.com/jones2000/HQChart

HQChart

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
HQChart实战教程7-自定义显示手势点击K线显示信息

HQChart实战教程7-自定义显示手势点击K线显示信息标题绘制事件接收绘制标题事件完整实例代码标题绘制事件AddEventCallback() 注册K线图事件监听事件（HQChart使用教程5- K线图控件操作函数说明）监听一下事件就可以。JSCHART_EVENT_ID.ON_TITLE_DRAW 标题绘制事件 this.Chart.AddEventCallback({event:...
复制链接

扫一扫