HQChart使用教程30-K线图如何对接第3方数据20-信息地雷公告数据
- 协议名称-公告
- 协议日志截图
- Request 字段说明
- 返回json数据结构
- 公告图标替换
- 简单的demo
- 效果图
- HQChart代码地址
- 如果教程或hqchart对你有帮助， 请在git上star，教程点下赞 。谢谢~~
协议名称-公告
对应代码的类名和函数名： 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