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

作者：2023面试高手 | 2024-03-20 04:24:38

踩

hqchart 自定义显示手势点击k线

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); }});
1

回调数据

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;
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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;
  }
1
2
3
4
5
6
7
8
9
10
11
12

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}`;
	}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

走势图

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}`;
	}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

完整实例代码

测试页面地址

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

分时图代码样例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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

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

交流QQ群: 950092318

HQChart代码地址

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/270664