Moostock(10) - apexchart tooltip, 주봉, 월봉 그래프 보여주기

그래프 보여주는 페이지에서 그냥 그래프만 보여주긴 아쉬우니 

다른 정보들을 더 보여주고자 했다

 

먼저 apexchart에서 캔들스틱 그래프를 사용하면 기본적으로

그래프위에 마우스를 올리면

저렇게 open high low close 이 4가지 항목을 보여준다

근데 영어인것도 맘에 안들고

등락률도 보여주면 좋을거같아서 커스텀을 했다

 

다행히 구글링하면 자료들이 꽤 있었지만

따라하는것도 생각보단 쉽지않아서 꽤 오래걸렸다

          options={{
            tooltip: {
              custom: ({ series, seriesIndex, dataPointIndex, w }) => {
                var data =
                  w.globals.initialSeries[seriesIndex].data[dataPointIndex];
                return (
                  "<div >" +
                  "<span>" +
                  "시가: " +
                  data.y[0] +
                  "</span>" +
                  "</div>" +
                );
              },
            },
          }}

options에 툴팁 부분을 저런식으로 수정해주면 된다 ㅎㅎ

이렇게 한글로 바꿔주고 등락율도 추가를 해줬다

뿌듯 ㅎㅎ

 

---

지금까지는 그래프의 일봉만 보여줬는데

 

주봉이나 월봉을 보여주는 메뉴를 추가했다

그리고 현재가도 보여주려고 추가했다

 

한투 api를 보낼때 항목 하나만 바꿔주면 주별 월별 데이터를 받아올수 있다

 

그래서 api의 url에 쿼리파라미터를 추가했다

const gubn = request.nextUrl.searchParams.get('gubn')

 

맨날 버튼그룹 같은거를 만들때 UI 프레임워크를 써와서

 

라디오버튼을 직접 구현하는것도 혼자 힘으론 할수 없었다 ㅠㅠ

 

그래서 구글링해서 가장 간단한 방법을 사용했다

 

요런식으로 아주 간단하게 해줬고

 

useEffect에 두번째 인자에 gubn변수를 추가해서 이 값이 바뀔때마다 데이터를 불러오게 했다

 

무튼 이제 나름 그럴싸 해 졌다

 

이제 자산평가쪽이나 다른쪽을 더 보강해서 돌아오겠다!!