HQChart实战教程8-如何手动重新初始化hqchart

最新推荐文章于 2024-06-06 14:18:43 发布

HQChart

最新推荐文章于 2024-06-06 14:18:43 发布

阅读量1.7k

点赞数 1

分类专栏： HQChart JavaScript 文章标签： hqchart kline k线图量化

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

版权

HQChart 同时被 2 个专栏收录

164 篇文章 98 订阅

订阅专栏

JavaScript

151 篇文章 33 订阅

订阅专栏

HQChart实战教程8-如何重新初始化hqchart

需求：
步骤：
- h5
- 小程序/uniapp-app(注意不是h5)
h5完整实例代码

需求：

有的时候页面可能需要重新初始化hqchart实例。一般的情况是不需要重新初始化实例，当时候setoption初始化以后，后续的K先操作都可以直接调用对应的实例函数来完成，具体可以看教程（HQChart使用教程5- K线图控件操作函数说明）。但有时候确实需要重新初始化， hqchart不提供重新初始化的方法, 只能自己手动重新初始化。

步骤：

h5

停止实例的定时器
清空实例
清空绑定k线div的下面的所有子元素
重新JSChart.Init() 初始化
SetOption() 加载配置
这样就完成了重新初始化的步骤了。

this.Recreate=function()
{
     if (this.Chart) 
     {
         this.Chart.StopAutoUpdate();    //停止定时器
         this.Chart=null;  //清空实例
     }

     this.ClearDivDOM(); //清空this.DivKLine 下面的所有子元素
     this.Chart=JSChart.Init(this.DivKLine);   //把K线图绑定到一个Div上
     this.Create();
}

this.ClearDivDOM=function()     
{
    while (this.DivKLine.hasChildNodes()) 
    {
        this.DivKLine.removeChild(this.DivKLine.lastChild);
    }　
}

小程序/uniapp-app(注意不是h5)

停止定时器
清空实例
重新JSChart.Init() 初始化
SetOption() 加载配置

h5完整实例代码

<!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>

    <div>
        <span id='recreate'>重新新建</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.ClearDivDOM=function()     
            {
                while (this.DivKLine.hasChildNodes()) 
                {
                    this.DivKLine.removeChild(this.DivKLine.lastChild);
                }　
            }

            //K线配置信息
            this.Option= {
                Type:'历史K线图',   //创建图形类型
                
                Windows: //窗口指标
                [
                    //{Index:"EMPTY"},
                    {Index:"MA", Modify:true,Change:false},
                    {Index:"VOL", Modify:true,Change:false},
                    {Index:"ADL", Modify:true,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.sh',
                IsAutoUpdate:true,       //是自动更新数据
                AutoUpdateFrequency:3000,   //数据更新频率
                //TradeIndex: {Index:'交易系统-BIAS'},    //交易系统
    
                IsShowRightMenu:true,          //右键菜单
                IsShowCorssCursorInfo:true,    //是否显示十字光标的刻度信息
                //CorssCursorTouchEnd: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, //禁止双击弹框
                },
    
                KLineTitle: //标题设置
                {
                    IsShowName:true,       //不显示股票名称
                    IsShowSettingInfo:true //不显示周期/复权
                },
    
                Border: //边框
                {
                    Left:5,         //左边间距
                    Right:100,       //右边间距
                    Bottom:25,      //底部间距
                    Top:25          //顶部间距
                },
                
                Frame:  //子框架设置
                [
                    {SplitCount:3,StringFormat:0, IsShowLeftText:false},
                    {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.Recreate=function()
            {
                if (this.Chart) 
                {
                    this.Chart.ChartDestory();    //停止定时器
                    this.Chart=null;
                }

                this.ClearDivDOM(); //清空this.DivKLine 下面的所有子元素
                this.Chart=JSChart.Init(this.DivKLine);   //把K线图绑定到一个Div上
                this.Create();
            }


            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.Chart.SetOption(this.Option);  //设置K线配置
            }

            this.OnSize=function()  //自适应大小调整
            {
                var height= $(window).height()-40;
                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();
            }
        }

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

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

            $("#recreate").click(function() { klineControl.Recreate(); } );
        })

        

    </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

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
HQChart实战教程8-如何手动重新初始化hqchart

HQChart实战教程8-如何重新初始化hqchart需求：步骤：h5小程序/uniapp-app(注意不是h5)h5完整实例代码需求：有的时候页面可能需要重新初始化hqchart实例。一般的情况是不需要重新初始化实例，当时候setoption初始化以后，后续的K先操作都可以直接调用对应的实例函数来完成，具体可以看教程（HQChart使用教程5- K线图控件操作函数说明）。但有时候确实需...
复制链接

扫一扫