HQChart使用教程30-K線圖如何對接第3方數據20-信息地雷公告數據

數據樣例

協議名稱-公告

對應代碼的類名和函數名： AnnouncementInfo::RequestData
目前只支持日線的公告， 分鐘K線的暫是不支持（沒有這個需求，如果你有這個需求可以把需求,展示截圖,數據樣本發羣裏，我看看怎麼加)

協議日誌截圖

Request 字段說明

Symbol：品種代碼
MaxReqeustDataCount：K線的數據個數（日線的）
MaxRequestMinuteDayCount：分鐘K線天數（分鐘K線）
注意數據個數是一個大概，因爲K線和公告是同時請求的，　所有具體K線返回的數據在請求的時候是不知道。

返回json數據結構

數據截圖

格式說明

注意字段都是小寫

code

固定填0

report

公告列表

releasedate

公告日期數值類型格式 yyyyhhdd

title

標題

type

可以缺省當默認公告顯示
公告類型字符串數組，目前只支持1個類型
“一季度報告”
“半年度報告”
“三季度報告”
“年度報告”
不同的類型，在顯示的時候會合併在一起，如果某一條K線上有多個相同類型的公告

typeex

可以缺省
擴展類型數值數字，目前只支持1個類型，後期可以支持一個公告屬於多個類型（可以加羣提，有人用就加，沒人用就不加了，精力有限）
數值支持 0-99，每個數值就是一個類型，對應1個svg圖片.

數據樣例

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庫
}

簡單的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>

效果圖

如果還有問題或新的需求可以加交流QQ羣: 950092318

HQChart代碼地址

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

如果教程或hqchart對你有幫助，請在git上star，教程點下贊。謝謝~~

HQChart使用教程30-K線圖如何對接第3方數據20-信息地雷公告數據

HQChart使用教程30-K線圖如何對接第3方數據20-信息地雷公告數據

協議名稱-公告

協議日誌截圖

Request 字段說明

返回json數據結構

數據截圖

格式說明

code

report

releasedate

title

type

typeex

數據樣例

公告圖標替換

簡單的demo

效果圖

HQChart代碼地址

如果教程或hqchart對你有幫助，請在git上star，教程點下贊。謝謝~~

salesforce零基礎學習（一百三十八）零碎知識點小總結（十）

關於接口協議，你必須要知道這些！

一鍵自動化博客發佈工具,用過的人都說好(頭條篇)

01 穩定性（一）如何應對事故並做好覆盤？

美團一面：項目中有 10000 個 if else 如何優化？想了半天，被問懵了！

FolkMq v1.4.6 發佈（可以內嵌的消息中間件）

京東面試：如何進行JVM調優？

線程池那些坑爹的參數-核心線程數&最大線程數&工作隊列

Stream流常用方法總結

HQChart使用教程63-uniapp使用renderjs+hqchart(h5)

HQChart實戰教程17 -K線沙盤推演

HQChart使用教程52- 自定義手機端K線圖Tooltip

HQChart實戰教程3-http+ws對接分鐘K線數據

HQChart實戰教程2-使用跨週期寫指標

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

HQChart使用教程30-K線圖如何對接第3方數據20-信息地雷公告數據

HQChart使用教程30-K線圖如何對接第3方數據20-信息地雷公告數據

協議名稱-公告

協議日誌截圖

Request 字段說明

返回json數據結構

數據截圖

格式說明

code

report

releasedate

title

type

typeex

數據樣例

公告圖標替換

簡單的demo

效果圖

HQChart代碼地址

如果教程或hqchart對你有幫助， 請在git上star，教程點下贊 。謝謝~~

如果教程或hqchart對你有幫助，請在git上star，教程點下贊。謝謝~~