HQChart實戰教程8-如何重新初始化hqchart
需求：
有的時候頁面可能需要重新初始化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.StopAutoUpdate(); //停止定時器
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