HQChart使用教程79-网络异常处理接口
https://opensource2.zealink.com/hqweb/demo/demo_error.html
异常处理在出现异常的时候, 在K线图上显示异常信息. 在异常信息显示的时候, 鼠标,键盘,手势都是无效的
如下图
常见的异常
- 数据下载失败,网络异常
- 数据格式不正确,无法转换成hqchart格式
- 无权限访问数据
等等 …
//全屏提示信息 { Title:提示信息, Draw:false/true 是否立即重绘, }
EnableSplashScreen(opton)
调用ChangeSymbol(当前的股票) 重新请求数据
例子<!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" ></div>
<div class='div_info'>
<span class="btn-style" id='button_1'>切换股票</span>
<span class="btn-style" id='button_2'>日K</span>
<span class="btn-style" id='button_3'>5分钟K</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>
//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线图横屏',
//EnableBorderDrag:false,
Windows: //窗口指标
[
{Index:"MA"},
{Index:"MACD"},
],
OverlayIndex:
[
//{ Index:'两融余额', Windows:1 ,Args:[ { Name:'N', Value:5} ] , ShowRightText:false},
//{Index:'BOLL', Windows:0 , IsShareY:true,ShowRightText:true },
//{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:1, //左边间距
Right:1, //右边间距
Bottom:25, //底部间距
Top:25 //顶部间距
},
Frame: //子框架设置
[
{
SplitCount:6,
Custom:
[
{
Type:0,
Position:'right',LineType:2,
}
]
},
{ SplitCount:5 }
],
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); //读取黑色风格配置
this.OnSize(); //让K线全屏
this.Option.NetworkFilter=(data, callback)=>{ this.NetworkFilter(data, callback); }
this.Chart.SetOption(this.Option); //设置K线配置
}
this.NetworkFilter=function(data, callback)
{
console.log('[NetworkFilter] data', data);
switch(data.Name)
{
case 'KLineChartContainer::ReqeustHistoryMinuteData': //分钟全量数据下载
this.RequestHistoryMinuteData(data, callback);
break;
case 'KLineChartContainer::RequestHistoryData': //日线全量数据下载
this.RequestHistoryData(data,callback);
break;
}
}
this.TestWaitTime=5;
this.RequestHistoryData=function(data, callback)
{
if (this.TestWaitTime<=0) return;
data.PreventDefault=true; //禁止使用HQChart内部请求
//使用定时器模拟ajax异步请求数据
setTimeout(()=>
{
data.Self.EnableSplashScreen({Title:`网路异常,数据请求失败. ${this.TestWaitTime}s后重连`, Draw:true});
setTimeout(() => {
this.WaitReconnect(data.Self, data.Name);
}, 800);
},5000);
}
this.RequestHistoryMinuteData=function(data, callback)
{
if (this.TestWaitTime<=0) return;
data.PreventDefault=true; //禁止使用HQChart内部请求
//使用定时器模拟ajax异步请求数据
setTimeout(()=>
{
data.Self.EnableSplashScreen({Title:`网路异常,数据请求失败. ${this.TestWaitTime}s后重连`, Draw:true});
setTimeout(() => {
this.WaitReconnect(data.Self);
}, 800);
},5000);
}
this.WaitReconnect=function(jsChartContainer)
{
--this.TestWaitTime;
if (this.TestWaitTime<=0) //重新请求数据
{
jsChartContainer.ChangeSymbol(jsChartContainer.Symbol); //重新请求数据
}
else
{
jsChartContainer.EnableSplashScreen({Title:`网路异常,数据请求失败. ${this.TestWaitTime}s后重连`, Draw:true});
setTimeout(() =>
{
this.WaitReconnect(jsChartContainer);
},800);
}
}
this.OnSize=function(option) //自适应大小调整
{
var height= $(window).height()-40;
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)
{
this.TestWaitTime=5;
this.Chart.ChangeSymbol(symbol);
}
this.ChangePeriod=function(period)
{
this.TestWaitTime=5;
this.Chart.ChangePeriod(period);
}
}
$(function ()
{
WebFont.load({ custom: { families: ['iconfont'] } }); //预加载下iconfont资源
var klineControl=new KLineChart(document.getElementById('kline'));
klineControl.Create();
$("#button_1").click(function() { klineControl.ChangeSymbol("000001.sz"); } );
$("#button_2").click(function() { klineControl.ChangePeriod(0); } );
$("#button_3").click(function() { klineControl.ChangePeriod(5); } );
})
</script>
</body>
</html>
<style>
#kline
{
width: 900px;
height:400px;
position: relative;
/*margin-top: 100px;*/
}
.btn-style
{
padding: 3px 8px;
border: 1px solid #ececec;
border-radius: 5px;
background-color: #f5f5f5;
cursor: pointer;
}
.div_info
{
padding: 8px 8px;
}
</style>
如果还有问题可以加交流QQ群: 950092318
HQChart代码地址地址：github.com/jones2000/HQChart
个人爱好摄影/模型
