HQChart使用教程80-自定义指标标题信息

HQChart

已于 2023-11-07 19:54:27 修改

阅读量1.7k

点赞数

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

于 2021-06-11 08:33:23 首次发布

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

版权

HQChart 同时被 2 个专栏收录

165 篇文章 100 订阅

订阅专栏

JavaScript

151 篇文章 33 订阅

订阅专栏

HQChart使用教程80-自定义指标标题信息

指标标题
demo地址
自定义显示步骤
完整demo代码
交流QQ群: 950092318
HQChart代码地址
个人爱好摄影/模型

指标标题

显示当前指标及十字光标所在位置的指标数据. 内置是使用画布画上去的. HQChart也支持外部自定义一个div来显示内容
在这里插入图片描述

demo地址

https://jones2000.github.io/HQChart/webhqchart.demo/samples/demo_indextitle.html
在这里插入图片描述

自定义显示步骤

关闭内置的指标标题显示

使用IsShowIndexTitle隐藏指标标题. 更多设置参见 HQChart使用教程1- 如何快速创建一个K线图页面

this.Option= 
{
 ........
   Frame:  //子框架设置
   [
        { SplitCount:6,IsShowIndexTitle:false}, //隐藏第1个指标窗口的指标标题
        { SplitCount:4} 
}

注册指标信息回调事件

指标信息回调事件JSCHART_EVENT_ID.ON_INDEXTITLE_DRAW, 如何注册监听事件见教程 HQChart使用教程5- K线图控件操作函数说明

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

回调事件参数说明

function(event, data, obj)
在回调事件里面, 获取指标信息, 然后外部创建一个div显示这些信息就可以了.

event

事件信息

data

指标信息

{ 
Index:数据索引, 
Data:主图指标数据 ,
Title:主图指标名,
FrameID:窗口ID, 
OverlayIndex:叠加指标信息,
Left: 标题栏左边坐标
Right:标题栏右边坐标
Top:标题栏顶部坐标
}

obj

指标标题实例

完整demo代码

<!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>自定义指标标题信息</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" ></div>

    <div>
        <span id='button_2'>切换股票</span>
        <span id='button_3'>窗口个数</span>
        <span id='button_4'>叠加指标</span>
        <span id='button_5'>切换指标</span>
        <span id='button_6'>切换自定义指标</span>
    </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>
        //简单的把K线控件封装下
        function KLineChart(divKLine)
        {
            this.DivKLine=divKLine;
            this.Chart=JSChart.Init(divKLine);   //把K线图绑定到一个Div上
            this.DivIndexTitle=[];

            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线图横屏',

                //EnableBorderDrag:false,
                
                Windows: //窗口指标
                [
                    //{Index:"EMPTY"},
                    {Index:"BOLL"},
                    
                    /*{
                        Name:'MA测试', Description:'均线', IsMainIndex:true, KLineType:0,
                        Args:[ { Name:'M1', Value:5}, { Name:'M2', Value:10 }, { Name:'M3', Value:20} ],
                        OutName:[ {Name:'MA1',DynamicName:"MA1(%)" },  {Name:'MA2', DynamicValue:"++{Value}--%" },{Name:'MA3',DynamicName:"MA{M3}" }],
                        Script: //脚本
                        "MA1:MA(C,10), NODRAW;\r\n"+
                        "MA2:MA(C,4);\r\n"  
                    },
                    */
                    
                    //{Index:"放心股-操盘BS点"},
                    //{Index:'MA', Change:true,IsShowOverlayIndexName:true, Overlay:true },
                    {Index:"AMO", Modify:false, Change:false, Close:false,StringFormat:2, },
                    //{Name:"dddd",Script:testindex, Modify:false,Change:false, Close:false},
                    //{Index:"测试", Script:"T:(L+H)/2;", KLineType:0, Modify:true,Change:false},
                    {Index:"MACD", Modify:false,Change:false,Overlay:true }, 
                ], 

                
                OverlayIndex:
                [
                    //{ Index:'两融余额', Windows:1 ,Args:[ { Name:'N', Value:5} ] , ShowRightText:false},
                    {Index:'MA', Windows:0 , IsShareY:true,ShowRightText:false },
                    //{Index:'RSI', Windows:1 },
                    //{Windows:0, IndexName:"指标ID", Name:"自定义指标", Script:"T:MA(O,20);", Identify:"guid_66990"}
                    //{Index:'北上资金', Windows:0 ,ShowRightText:false}
                ],  //叠加指标

                OverlayIndexFrameWidth:1,

                DragDownload: { Day:{ Enable:true } , Minute:{ Enable:true }}, 

                EnableZoomUpDown:
                {
                    //Wheel:false,
                    //Keyboard:false,
                    //Touch:false,
                },

                EnableYDrag:
                {
                    Right:true,
                    Left:true,
                },

                
                Symbol:'600000.sh',
                IsAutoUpdate:true,       //是自动更新数据
                AutoUpdateFrequency:10000,   //数据更新频率
                //TradeIndex: {Index:'交易系统-BIAS'},    //交易系统

                SplashTitle:"加载数据中......",
    
                IsShowRightMenu:true,          //右键菜单
                //CorssCursorTouchEnd:true,
                IsCorssOnlyDrawKLine:true,

                CorssCursorInfo: { DateFormatType:2, HPenType:1, VPenType:1 },
    
                KLine:  //K线设置
                {
                    DragMode:1,                 //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
                    Right:1,                    //复权 0 不复权 1 前复权 2 后复权
                    Period:0,                   //周期 0 日线 1 周线 2 月线 3 年线 
                    MaxReqeustDataCount:200,   //数据个数
                    MaxRequestMinuteDayCount:5, //分钟数据获取几天数据  默认取5天数据
                    PageSize:50,               //一屏显示多少数据
                    //Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"],       //信息地雷
                    //Info:["公告"], 
                    IsShowTooltip:true,                 //是否显示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,
                    IsShowTooltip:true,
                },

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

                EnableFlowCapital:
                {
                    BIT:true
                },
    
                KLineTitle: //标题设置
                {
                    IsShowName:true,       //不显示股票名称
                    IsShowSettingInfo:true //不显示周期/复权
                },
    
                Border: //边框
                {
                    Left:50,         //左边间距
                    Right:50,       //右边间距
                    Bottom:25,      //底部间距
                    Top:25         //顶部间距
                },
                
                Frame:  //子框架设置
                [
                    {
                        SplitCount:6,StringFormat:0, IsShowLeftText:true,
                        IsShowIndexTitle:false,
                        //YCoordinateType:5,
                        //TopSpace:0,BottomSpace:0,
                        //IsYReverse:true,
                        IsShowYLine:true,YTextBaseline:1,
                        IsShowXLine:true,
                        //SplitType:1,
                        DefaultYMaxMin:
                        { 
                            //Min:2, 
                            //Max:50
                        },
                        //BorderLine:8|2,
                        /*
                        Custom:
                        [
                            { 
                                Type:0,
                                Position:'right',LineType:2,
                            },

                            { 
                                Type:1, 
                                Position:'right',IsShowLine:true, LineType:0,
                                Data:
                                [
                                    {
                                        Value:2800.55,
                                        Color:'rgb(255,185,255)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
                                    },
                                    {
                                        Value:2789.11,
                                        Color:'rgb(255,185,0)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
                                    }
                                ] 
                            },

                            { 
                                Type:1, 
                                Position:'right',IsShowLine:true,LineType:2,
                                Data:
                                [
                                    {
                                        Value:2860.55,
                                        Color:'rgb(255,185,255)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
                                    },
                                    {
                                        Value:2799.11,
                                        Color:'rgb(255,185,0)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
                                    }
                                ] 
                            }
                        ]
                        */
                        
                    },

                    { SplitCount:5, IsShowLeftText:false, IsShowIndexTitle:false },
                    { SplitCount:4,StringFormat:0, IsShowLeftText:false, IsShowIndexTitle: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); //读取黑色风格配置
                //blackStyle.DRAWICON={ MinSize:20 , MaxSize:60};
                //JSChart.SetStyle(blackStyle);
                //this.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景

                //MARKET_SUFFIX_NAME.GetCustomDecimal=(symbol)=>{ return 4; }
                //MARKET_SUFFIX_NAME.GetDefaultDecimal=(symbol)=>{ return 3;}
                
                this.OnSize();  //让K线全屏
                this.Option.NetworkFilter=(data, callback)=>{ this.NetworkFilter(data, callback); }
                this.Chart.SetOption(this.Option);  //设置K线配置

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

                dom=document.createElement("div");
                dom.style.position = "absolute";
                dom.style.background='rgba(255,228,181,0.8)';

            }

            this.NetworkFilter=function(data, callback)
            {
                console.log('[NetworkFilter] data', data);
            }

            this.OnIndexTitleDraw=function(event, data, obj)
            {
                console.log('[KLineChart::OnIndexTitleDraw] event, data', event , data);

                var frameID=data.FrameID;
                if (!this.DivIndexTitle[frameID])
                {
                    var dom=document.createElement("div");
                    dom.style.position = "absolute";
                    dom.style.background='rgba(255,228,181,0.3)';
                    dom.className="indexTitle";
                    dom.style["pointer-events"]="none";
                    this.DivKLine.appendChild(dom);
                    this.DivIndexTitle[frameID]=dom;
                }
                else
                {
                    var dom=this.DivIndexTitle[frameID];
                }

                dom.style.left =data.Left + "px";
                dom.style.top=data.Top+"px";

                var log=`${data.Title},`;
                for(var i in data.Data)
                {
                    var item=data.Data[i];
                    if (!item || !item.Data || !item.Data.Data) continue;
                    if (item.Data.Data.length<=0) continue;

                    var dataIndex=item.Data.DataOffset+data.Index;
                    if (dataIndex>=item.Data.Data.length) dataIndex=item.Data.Data.length-1;
                    if (dataIndex<0) continue;
                    value=item.Data.Data[dataIndex];
                    if (value==null) continue;

                    log+=`${item.Name}=${value.toFixed(2)} `;
                }

                var mainIndex=`<span>${log}</span>`;
                console.log("[KLineChart::OnIndexTitleDraw] ",mainIndex);
                var htmlContent=mainIndex;
                if (data.OverlayIndex.size>0)   //叠加指标
                {
                    for(var overlayIndexItem of data.OverlayIndex)
                    {
                        var indexItem=overlayIndexItem[1];
                        var log=`叠加指标:${indexItem.Title}`;
                        for(var i in indexItem.Data)
                        {
                            var item=indexItem.Data[i];
                            if (!item || !item.Data || !item.Data.Data) continue;
                            if (item.Data.Data.length<=0) continue;

                            var dataIndex=item.Data.DataOffset+data.Index;
                            if (dataIndex>=item.Data.Data.length) dataIndex=item.Data.Data.length-1;
                            if (dataIndex<0) continue;
                            value=item.Data.Data[dataIndex];
                            if (value==null) continue;

                            log+=`${item.Name}=${value.toFixed(2)} `;
                        }

                        var overlayIndexTitle=`<br><span>${log}</span>`;
                        console.log("[KLineChart::OnIndexTitleDraw] ",overlayIndexTitle);
                        htmlContent+=overlayIndexTitle
                    }
                }

                dom.innerHTML=htmlContent;
                dom.style.display = "block";
                //dom.style.display="none";
            }

            this.OnSize=function(option)  //自适应大小调整
            {
                var height= $(window).height()-50;
                var width = $(window).width();
                this.DivKLine.style.top='0px';
                this.DivKLine.style.left='0px';
                this.DivKLine.style.width=width+'px';
                this.DivKLine.style.height=height+'px';
                this.Chart.OnSize(option);
            }

            this.ChangeSymbol=function(symbol)
            {
                for(var i in this.DivIndexTitle)
                {
                    var item=this.DivIndexTitle[i];
                    if (item) item.style.display="none";
                }

                this.Chart.ChangeSymbol(symbol);
            }

            this.ChangeIndexCount=function()
            {
                //已经存在的指标不会改变，新的窗口使用option的配置指标
                var option=
                { 
                    Windows:
                    [
                        {Index:"MA", Modify:true,Change:false},
                        {Index:"MACD2"},
                        {Index:"MACD",Modify:false, Change:true, Close:true},
                        {Index:"VOL", Args:[ { Name:'M1', Value:6} ,{ Name:'M2', Value:8}] , IsShowIndexTitle:false, Modify:false,Change:false, Close:true },
                    ],
                };

                this.Chart.ChangeIndexWindowCount(4,option);
            }

            this.OverlayIndex=function()
            {
                var option={WindowIndex:0, IndexName:"指标ID", Name:"自定义指标", Args:[{Name:"T", Value:5}],
                Script:"T:MA(O,20);DRAWTEXT_LINE(O>C,13,'13.00',RGB(0,33,3), 10,1, RGB(0,255,0));", Identify:"guid_66990"};
                //var option={WindowIndex:0, IndexName:"MACD", Identify:"guid_66990"};
                this.Chart.AddOverlayIndex(option);
            }

            this.ChangeIndex=function(windowIndex,indexName,option)
            {
                this.Chart.ChangeIndex(windowIndex,indexName,option);
            }

            this.ChangeScriptIndex=function(windowIndex,indexInfo)
            {
                this.Chart.ChangeScriptIndex( 0, { Name:"test", Script:"T:MA(C,10)" } );
            }

            
        }

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

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

            $("#button_2").click(function() { klineControl.ChangeSymbol("000001.sz"); } );
            $("#button_3").click(function() { klineControl.ChangeIndexCount(); } );
            $('#button_4').click(()=>{klineControl.OverlayIndex();});
            $('#button_5').click(()=>{
                var option={Window:{ Close:false, Change:false, Overlay:true, Close:true}};
                klineControl.ChangeIndex(1,"RSI",option);
            });

            $('#button_6').click(()=>{

                klineControl.ChangeScriptIndex();
                return;
                var indexData=
                {
                    API:{Name:'多线段指标',Script:null,Args:null, Url:'http://127.0.0.1:18080/api/jsindex' },
                    Window:{ Close:false, Change:false, Overlay:true, Close:true}
                };
                klineControl.ChangeIndex(1,"指标1",indexData);
            });
        })

    </script>  

</body>  
</html>



<style>

#kline
{
    width: 900px;
    height:400px;
    position: relative;
    /*margin-top: 100px;*/
}

    
</style>

交流QQ群: 950092318

如果还有问题可以加交流QQ群: 950092318

HQChart代码地址

地址：github.com/jones2000/HQChart

个人爱好摄影/模型

在这里插入图片描述

HQChart

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
HQChart使用教程80-自定义指标标题信息

HQChart使用教程80-自定义指标标题信息指标标题demo地址自定义显示步骤关闭内置的指标标题显示注册指标信息回调事件回调事件参数说明eventdataobj完整demo代码交流QQ群: 950092318HQChart代码地址指标标题显示当前指标及十字光标所在位置的指标数据. 内置是使用画布画上去的. HQChart也支持外部自定义一个div来显示内容demo地址https://opensource2.zealink.com/hqweb/demo/demo_indextitle.html
复制链接

扫一扫