HQChart使用教程66-自定义数据下载文字提示效果

数据下载文字提示

hqchart内置一个简单的数据下载文字提示信息，效果看下图
这个提示信息是直接画在画布上的，所有样式不能修改，只可以修改提示文字信息（如何修改文字提示信息看教程 HQChart使用教程1- 如何快速创建一个K线图页面），如果要改变样式，可以在外部自己建一个div来显示这个提示信息效果

自定义文字提示信息步骤

1. 设置内置的文字提示信息为空

 this.Option= 
 {
     Type:'历史K线图',   //创建图形类型
     ...............
     SplashTitle:"",
     ..........

2. 注册文字提示信息状态变动事件

事件ID为:ON_ENABLE_SPLASH_DRAW
这个事件注册必须在SetOption里面设置
具体格式详见 HQChart使用教程5- K线图控件操作函数说明

this.Option= 
 {
     Type:'历史K线图',   //创建图形类型
     EventCallback:
     [
         {
             event:JSCHART_EVENT_ID.ON_ENABLE_SPLASH_DRAW,
             callback:(event, data, chart)=> {this.OnEnableSplashDraw(event, data, chart); }
         }
     ],

3. 提示信息状态监听事件回调

格式 function(event, data, obj)
具体是的格式详见 HQChart使用教程5- K线图控件操作函数说明
data 格式 { Enable:是否启动文字提示信息 }

this.OnEnableSplashDraw=function(event, data, chart)
{
    if (data.Enable==true) DataLoading();	//开始文字提示
    else DataLoadEnd();	 //隐藏文字提示
}

4. 在外部自己做一个div来显示文字提示信息效果

这个就简单的做一个文字提示的， 你也可以使用动画图片。

 function DataLoading() 
 {
      $("<div class=\"loading\"></div>").css({
          display: "block",
          width: "100%",
          height: $(window).height()
      }).appendTo("body");
      $("<div class=\"loading-msg\"></div>").html("正在处理，请稍候。。。").appendTo("body").css({
          display: "block",
          left: ($(document.body).outerWidth(true) - 190) / 2,
          top: ($(window).height() - 45) / 2,
          position: "absolute",
          "text-align": "center"
      });
  }

  function DataLoadEnd() 
  {
      $(".loading").remove();
      $(".loading-msg").remove();
  }
  ..................
  
<style>

.loading {
 position: fixed;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 background-color: black;
 opacity: 0.4;
 z-index: 1000;
}  

交流QQ群: 950092318

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

HQChart代码地址

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

个人爱好

最近在学习模型拍摄，变形金刚-地出-烟雾弹（SmokesScreen)