[vis.js] network chart 그릴 때 loading bar 만들기

안녕하세요.

저는 요즘 vis.js 오픈소스를 활용하여 network chart를 만들고 있는데요.

 

노드가 많아질 수록 차트 랜더링 하는 속도가 길어져서,

loading bar를 만들어 주려고 합니다.

 

vis.js network chart의 이벤트 기능 중,

stabilizationProgress, stabilizationIterationsDone

을 이용한 방법입니다.

 

참조 한 사이트에서 본 소스를,

제 소스에 맞춰 살짝 변경하여 적용하였습니다.

 

아래는 JavaScript 부분입니다.

			//loading process
			network.on("stabilizationProgress", function (params) {
		       var maxWidth = 496;
		       var minWidth = 20;
		       var widthFactor = params.iterations / params.total;
		       var width = Math.max(minWidth, maxWidth * widthFactor);
		       document.getElementById('loadingBar').style.display = 'block';
		       document.getElementById('chartMask').style.display = 'block';
		       document.getElementById('loadingBar').style.opacity = 1;
		       document.getElementById('chartMask').style.opacity = 0.15;
		       document.getElementById('process').style.width = width + 'px';
		       document.getElementById('text').innerHTML = Math.round(widthFactor * 100) + '%';
		    });
		    network.on("stabilizationIterationsDone", function () {
		       document.getElementById('text').innerHTML = '100%';
		       document.getElementById('process').style.width = '496px';
		       document.getElementById('loadingBar').style.display = 'none';
		       document.getElementById('chartMask').style.display = 'none';
		    });

 

아래는 HTML 부분입니다.

 

<div id="chartMask"></div>
	<div id="loadingBar" style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%); z-index:99;">
		<div class="outerBorder" style="text-align:center;">
	    	<div id="text" style="color:#538de5;font-size: 20px;margin-bottom: 10px;">0%</div>
	        <div id="border">
	           <div id="bar" style="width:496px; background: #fff;height: 8px;border-radius: 20px; position:relative;">
	           	 <div id="process" style="position:absolute; height:100%; left:0; top:0; background:#538de5; border-radius:20px;"></div>
	           </div>
	        </div>
		</div>
	</div>

 

 

참조 : https://stackoverflow.com/questions/56270951/is-there-an-way-to-make-loading-progress-bar-run-again-in-visjs