HQChart使用教程30-K线图如何对接第3方数据20-信息地雷公告数据

HQChart

已于 2023-03-29 09:23:59 修改

阅读量1.4k

点赞数 1

分类专栏： HQChart JavaScript HQChartK线图第3方数据对接文章标签： kline K线图量化 HQChart

于 2020-05-01 13:02:41 首次发布

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

版权

HQChart 同时被 3 个专栏收录

164 篇文章 97 订阅

订阅专栏

JavaScript

151 篇文章 33 订阅

订阅专栏

HQChartK线图第3方数据对接

50 篇文章 10 订阅

订阅专栏

告效果图

在这里插入图片描述

协议名称-公告

对应代码的类名和函数名： AnnouncementInfo::RequestData
日K，分钟K都支持，

协议日志截图

在这里插入图片描述

拖拽数据增量更新

拖拽下载历史K线以后, 会触发信息地雷数据数据请求回调.
可以通过是否又Update字段来判断是增量更新还是全量更新,Update.Start.Date 是拖拽数据前K线的起始日期
在这里插入图片描述
注意: 目前只支持拖拽下载历史日线, 分钟K线的不支持, 如果需要分钟K线支持联系群主加上. 有人用我才会去开发这个功能.

Request 字段说明

Symbol：品种代码
MaxReqeustDataCount：K线的数据个数（日线的）
MaxRequestMinuteDayCount：分钟K线天数（分钟K线）
注意数据个数是一个大概，因为K线和公告是同时请求的，　所有具体K线返回的数据在请求的时候是不知道。

返回json数据结构

数据截图

在这里插入图片描述

格式说明

注意字段都是小写

code

固定填0

report

公告列表

releasedate

公告日期数值类型格式 yyyyhhdd

time

公告时间，格式hhmm ， 只有分钟周期的K线才需要，日K的不要填

title

标题

type

可以缺省当默认公告显示
公告类型字符串数组，目前只支持1个类型
“一季度报告”
“半年度报告”
“三季度报告”
“年度报告”
不同的类型，在显示的时候会合并在一起，如果某一条K线上有多个相同类型的公告

typeex

可以缺省
扩展类型数值数字，目前只支持1个类型，后期可以支持一个公告属于多个类型（可以加群提，有人用就加，没人用就不加了，精力有限）
数值支持 0-99，每个数值就是一个类型，对应1个svg图片.

Update

是否是增量更新,拖拽下载历史日线数据以后, 或触发公告信息地雷数据回调, 这个时候你可以选择全量数据更新或增量更新, 如果是增量更新,设置为true,这样之前现在的信息地雷数据不会被删除,新的数据插入在后面.

数据样例

this.AnnouncementInfo=function(data, callback)
{
    data.PreventDefault=true;
    var self=this;
    var symbol=data.Request.Symbol;

    var TEST_DATA=
    [
        { releasedate:20200415, title:'20200415公告标题测试1' },
        { releasedate:20200415, title:'20200415公告标题测试2' },
        { releasedate:20200415, title:'20200415公告标题测试3', type:['一季度报告'] },
        { releasedate:20200415, title:'20200415公告标题测试4', type:['一季度报告'] },
        { releasedate:20200415, title:'20200415公告标题测试5', type:['三季度报告'] },
        { releasedate:20200415, title:'20200415公告标题测试6', type:['年度报告'] },

        //扩展类型
        { releasedate:20200323, title:'20200323扩展类型公告1', typeex:[1] }, //typeex 扩展类型 0-10 对应图标
        { releasedate:20200323, title:'20200323扩展类型公告2', typeex:[2] },
        { releasedate:20200323, title:'20200323扩展类型公告3', typeex:[2] },
    ]

    setTimeout(() => {
        //模拟异步请求数据， 然后设置到hqchart里面
        var recvData={report:TEST_DATA, code:0 };
        console.log("[KLineChart::AnnouncementInfo] recvdata ",recvData);
        callback(recvData);
    }, 200);
}

公告图标替换

公告所有的图标都是用SVG图标，其他类型的都不支持。
图标在全局的资源变量里面，如何获取全局资源变量见教程
HQChart使用教程4- 如何自定义K线图颜色风格

公告资源位置
在这里插入图片描述
Announcement.IconFont 默认公告图标
Announcement.IconFont2 季报图标

IconLibrary 扩展公告图标
{
Family：字体名字
Icon：图标数组，索引对应typeex的数值，目前就随便放几个图标，可以自行更换自己iconfont库
}

如果还有问题或新的需求可以加交流QQ群: 950092318

简单的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>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>

    <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:"EMPTY"},
                    {Index:"MA", Modify:false,Change:false},
                    {Index:"VOL", Modify:false,Change:false},
                    {Index:"MACD", Modify:false,Change:false},
                    //{Index:"MACD", Modify:true,Change:false},
                    //{Index:"RSI", Modify:false,Change:false}, 
                ], 

                
                OverlayIndex:
                [
                    //{Index:'VOL', Windows:0 ,Args:[ { Name:'M1', Value:20}, { Name:'M2', Value:30} ] , ShowRightText:false},
                    //{Index:'MACD', Windows:0 },
                    //{Index:'MA', Windows:1 }
                ],  //叠加指标

                OverlayIndexFrameWidth:1,
                
                
                Symbol:'000001.sz',
                IsAutoUpdate:true,       //是自动更新数据
                AutoUpdateFrequency:1000,   //数据更新频率
                //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:true,                 //是否显示K线提示信息
                    DrawType:0,      //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
                    //FirstShowDate:20161201,
                    KLineDoubleClick:false, //禁止双击弹框
                    RightSpaceCount:5,
                    ZoomType:1,
                },

                EnableFlowCapital:
                {
                    BIT:true
                },
    
                KLineTitle: //标题设置
                {
                    IsShowName:true,       //不显示股票名称
                    IsShowSettingInfo:true //不显示周期/复权
                },
    
                Border: //边框
                {
                    Left:0,         //左边间距
                    Right:60,       //右边间距
                    Bottom:25,      //底部间距
                    Top:25          //顶部间距
                },
                
                Frame:  //子框架设置
                [
                    {
                        SplitCount:6,StringFormat:0, IsShowLeftText:false, 
                        Custom:
                        [
                            { 
                                Type:0,
                                Position:'right',
                            },
                            { 
                                Type:1, 
                                Position:'right',IsShowLine:true,
                                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:文字颜色
                                    }
                                ] 
                            }
                        ]
                    },

                    {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.Option.NetworkFilter=(data, callback)=> { this.NetworkFilter(data, callback); } ,   //绑定网络协议回调
                this.Chart.SetOption(this.Option);  //设置K线配置
            }

            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.NetworkFilter=function(data, callback)
            {
                console.log(`[KLineChart::NetworkFilter] name=${data.Name}`);
                console.log("[KLineChart::NetworkFilter]  data ", data);

                switch(data.Name)
                {
                    case "AnnouncementInfo::RequestData":
                        this.AnnouncementInfo(data, callback);
                        break;
                }
            }

            this.AnnouncementInfo=function(data, callback)
            {
                data.PreventDefault=true;
                var self=this;
                var symbol=data.Request.Symbol;

                var TEST_DATA=
                [
                    { releasedate:20200415, title:'20200415公告标题测试1' },
                    { releasedate:20200415, title:'20200415公告标题测试2' },
                    { releasedate:20200415, title:'20200415公告标题测试3', type:['一季度报告'] },
                    { releasedate:20200415, title:'20200415公告标题测试4', type:['一季度报告'] },
                    { releasedate:20200415, title:'20200415公告标题测试5', type:['三季度报告'] },
                    { releasedate:20200415, title:'20200415公告标题测试6', type:['年度报告'] },

                    //扩展类型
                    { releasedate:20200323, title:'20200323扩展类型公告1', typeex:[1] }, //typeex 扩展类型 0-10 对应图标
                    { releasedate:20200323, title:'20200323扩展类型公告2', typeex:[2] },
                    { releasedate:20200323, title:'20200323扩展类型公告3', typeex:[2] },
                ]

                setTimeout(() => {
                   
                    var recvData={report:TEST_DATA, code:0 };
                    console.log("[KLineChart::AnnouncementInfo] recvdata ",recvData);
                    callback(recvData);
                }, 200);
            }
        }

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

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

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



<style>

/*
.klineframe-toolbar
{
    color:rgb(238,233,233);
}

.klineframe-toolbar span:hover
{
    color: #0182d4;
}
*/
    
</style>

效果图

在这里插入图片描述

HQChart代码地址

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

如果教程或hqchart对你有帮助，请在git上star，教程点下赞。谢谢~~

个人爱好(模型/摄影)

在这里插入图片描述

HQChart

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
HQChart使用教程30-K线图如何对接第3方数据20-信息地雷公告数据

HQChart使用教程30-K线图如何对接第3方数据20-信息地雷公告数据协议名称-公告协议日志截图Request 字段说明返回json数据结构数据截图格式说明codereportreleasedatetitletypetypeex数据样例公告图标替换简单的demo效果图![在这里插入图片描述](https://img-blog.csdnimg.cn/20200501125855402.png?x...
复制链接

扫一扫