[Recharts] bar 를 floating bar 로 만들어 진짜 주식 차트처럼 그리기

THOVY·2022년 11월 14일

JavaScript React project

PROJECT

목록 보기

5/20

시작 👊

주식 차트를 그리는데 "상한가"로만 표현된다.😟

내가 원하는 차트 그림은 이게 아니야.

내가 원하는 차트는 진짜 주식 차트 처럼

하한가 상한가를 가지고 막대의 길이를 조절하고 싶다.

내가 가져온 데이터(한국투자증권 주식 API)에 이렇게 모든 게 담겨 있기 때문에

주가 아래쪽 바닥에는 거래량까지 표현할 수 있다.
사실 거래량을 표시하는 것은 어렵지 않다.

거래량은 바닥부터 올라오면 되는 그냥 막대그래프 기 때문에 <Bar/> 를 하나 더 넣고 데이터를 넣어주면 된다.

결국 내가 원하는 건 🤔

하한가 상한가 를 이용해 막대를 공중에 띄우기 floating
전일 대비 부호 를 이용해 막대그래프 색깔 바꾸기
바닥에 거래량 막대 표시하기

🙂 만들어보자

🙋‍♂️ 1번부터 만들어볼까욤.

dataKey 값에는
String or Number 를 넣을 수 있다.
하지만
LineChart 에서는
function 까지 가능하다.
function 을 넣어보자.

<BarChart data={stockData} width={500} height={300}>
  <CartesianGrid strokeDasharray="3 3"/>
  <XAxis dataKey="stck_bsop_date"/>
  <YAxis />
  <Tooltip/>
  <Bar
  	dataKey={
    (data)=>{
      const range = [data.stck_hgpr, data.stck_lwpr]
      return range}}
    fill = "#E94560"
  />
</BarChart>

우리가 받아온 주가 data 인 stockData 가 <BarChart data={stockData}> 로 들어가서
<Bar> 에 있는 dataKey 로 하나씩 뿌려진다.

그냥 String 으로 보내기 위해서는 dataKey="stck_hgpr" 이라고 쓰면된다. 그 안에 있는 값을 뿌려주는 거라고 생각됨.
하지만 나는 범위로 그리고 싶었기 때문에 리스트형태로 보내줬어야한다.
Barchart API Docs
Barchart API Docs Exam

이것처럼 보내줘야하는데, 우리가 stockData 를 받아오면 바로 값이 정해지므로 화살표함수를 이용해봤지!

결과

따란~!
심심하지만 원하는 결과가 나왔다.

🙆‍♂️ 2번을 만들어볼까욤.

차트 기둥마다 색깔 바꾸기는 Custom 에서 힌트를 받을 수 있다.

이렇게 <Bar> 컴포넌트 안쪽에 <Cell> 컴포넌트를 하나 만들어서 거기서 path 를 사용하고 있다.

내가 처음에 생각했던

solution 1 ❌

<Bar> 컴포넌트의 속성값으로 fill 이 있으니 거기에 적어주면 되지 않을까 해서

<BarChart data={stockData} width={500} height={300}>
  <CartesianGrid strokeDasharray="3 3"/>
  <XAxis dataKey="stck_bsop_date"/>
  <YAxis />
  <Tooltip/>
  <Bar
  	dataKey={
    (data)=>{
      const range = [data.stck_hgpr, data.stck_lwpr]
      return range}}
    fill = {(stockData.prdy_vrss_sign > 3) ? "#006DEE" : "#E94560"}
  />
</BarChart>

이렇게 적었는데

그러면 그림이 그려지지 않는다.

solution 2 ❌

그래서 dataKey 처럼 함수를 넣어볼까.

<Bar
  ...
  
  fill={(e)=>{
    const a = e.stck_hgpr;
    return a
  }}
/>

하면

solution 3 ✅

그래서 살펴본 Docs 의 Custom 부분.

<Cell> 을 이용해보자!

<Bar
 ...
>
 	{stockData.map((data)=>(
      <Cell fill={(data.prdy_vrss_sign > 3) ? "#006DEE" : "#E94560"}/>
  	))}
</Bar>

따란!

쉽다 쉬워~ (색깔만 이틀잡아먹음)🤣

👨‍💻 3번을 만들어볼까욤.

새로 추가하려고 하는 Bar 컴포넌트와 거기에 데이터 를 추가해주자

👍 차트 조합
다양한 형태의 차트를 조합하고 싶다면 ComposedChart 를 사용해야한다
예를들면 하나는 Bar, 다른 하나는 Line chart 를 이용하려면 ComposedChart 를 이용하자!
그러지 않으면 해당 Chart 와 같은 것만 표시된다!
🎇즉, BarChart 내부에 Bar 와 Line 을 넣으면 Bar 만 표시되고 Line 은 표시되지 않는다.
하지만 ComposedChart 내부에 Bar 와 Line 을 넣으면 둘 다 표시된다!

나는 Bar 형태만 사용할 거기 때문에 BarChart 를 그대로 사용할 거다.

<BarChart>
  ...
  <Bar
    dataKey={
      (data)=>{
      const range = [data.stck_hgpr, data.stck_lwpr]
      return range}}
    fill= "#E94560"
  >
    {stockData.map((data)=>(
      <Cell fill={(data.prdy_vrss_sign > 3) ? "#006DEE" : "#E94560"}/>
    ))}
  </Bar>
  <Bar dataKey={(e)=>((e.acml_vol)/10000)}/>
</BarChart>