[tradingView] 차트 그리기 도구 로컬에 저장해서 불러오기 / save() / load()

이번에 리액트 / 트레이딩뷰를 활용해서 차트 그리기를 시도해봤다.

사실 트레이딩뷰 세팅까지는 원리만 익히면 예제 코드도 많아서 그리는작업는 수월했는데, 차트에 그려진 값들을 로컬에 저장하려고 하니, 문서를 제대로 읽기 힘들어서 계속 실패를 거듭했다. ㅠ_ㅠ

 

 

 

onChartReady 안에서 활용하기

우선 트레이딩뷰는 추가 옵션을 입력할때 기본적으로 onChartReady 안에 넣어주어야 정상작동한다.

그래야 차트가 준비가 된 상태에서 다른 정보들을 세팅해줄 수 있다.

 

widget.onChartReady(() => {})

 

 

 

 

drawing_event 

그리고 구독 이벤트(subscribe) 를 활용해서 drawing_event 를 감지해준다.

해당 이벤트를 구독하기 시작하면, 커서가 이벤트를 발생했을때마다 save 이벤트로 저장을 해줄 수 있다.!

 

 widget.subscribe("drawing_event", (e: any) => {
  widget.save((event: any) => {
    localStorage.setItem("tvWidgetObj", JSON.stringify(event));
  });
});

 

 

 

 

save(), load() 

해당 이벤트는 object 형식으로 저장되는데, 그대로 local 에 저장해준다.

그 후, 차트가 준비가 되었을때, 로컬에 저장값이 있다면 load() 이벤트를 실행해준다.

load() 에 첫번째 인자값으로, 로컬스토리지에 저장했던 파일 그대로 넣어주면 구현이 된다.

 

새로고침해도 잘 실행된다

 

 

 

 

 

전체코드

widget.onChartReady(() => {
    // 캔버스 스토리지 저장
    widget.subscribe("drawing_event", (e: any) => {
      widget.save((event: any) => {
        localStorage.setItem("tvWidgetObj", JSON.stringify(event));
      });
    });
    // 캔버스 정보 가져오기
    if (localStorage.getItem("newObj") !== null) {
      const storageData = localStorage.getItem("newObj") as string;
      widget.load(JSON.parse(storageData));
    }
  });