2탄 바이낸스 차트 데이터 받기 (Kline/Candlestick Data)

자 데이터를 받아 왔으면 이제 데이터를 가공할 차례입니다. 

이부분이 제일 많은 작업이 필요하고 귀찮죠 ... 

 

일단 첫쨰 소켓으로 node.js을 통해서 front 쪽으로 데이터를 보내줍니다. 

HTML 에는 이렇게 데이터를 받습니다. 

 

CDN 설치 필수 입니다. 

 

<div id="chart"></div>

        <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

var socket = io.connet("ws//서버 번호") 

socket.on 을 통해서 "data_set으로" 데이를 보낸뒤 return_data에서 데이터를 꺼냅니다. 

 

일단 데이터가 여러게 2차열 배열로 들어가 있기때문에 for문을 돌려서 배열을 하나씩 꺼내줍니다. 

그리고 나서 앞에 1탄에서 보시면 

 

0번째는 시간입니다. 

 

[0] 값은 시간입니다.                       

 

[1] 값은 open장 가격입니다.

 

[2] 값은 제일 비싼 가격입니다. 

 

[3] 값은 제일 낮은 가격입니다.

 

insert_time은 Uniunix timestamp으로 오기때문에 데이터를 가공 할 수도 있고 아님 저처럼 new Date에다가 데이터를 넣어서 돌리도 됩니다. 

 

이제 데이터를 가공 한뒤 global_object에 X와 Y형태로 데이터를 넣어줍니다. 

여기서 중요한점은 Y축의 값이 [] 안에 4개의 값들이 들어간다는 사실입니다

이런식으로 데이터 들어가 있습니다. 

 

 

그 다음 options에다가 data를 넣어줍니다.  

data의 형태는 [{}] 형태로 들어갑니다. 그래서 global_array를 전 [{ }]형태로 만들어 준것입니다.

 

 

 

이렇게 데이터를 넣고 차트를 render 해주면 끝~~!! 이러한 차트를 보실수 있을거에요~!

 

 

궁금하신점 있으면 댓글에 남겨주세요!