[원티드] 5월 23일 TIL

Victory (1)

기존에 chartjs를 이용해서 그래프 구현을 했었는데 요번에는 victory를 이용해서 구현중에 있다. 개인적으로 chartjs가 배우기에는 더 쉬웠던 것 같다.

설치하기

install

npm install victory
yarn add victory

차트에 넣을 데이터는 기본적으로 x축, y축을 2개의 데이터 값을 key,value로 가지는 객체 배열이 들어간다.

 data={[
              { x: '2022-02-01', y: 6 },
              { x: '2022-02-02', y: 4 },
            ]}

기본적으로 빅토리 차트 컴포넌트로 감싸서 사용해준다.

 	<VictoryChart>
        <VictoryBar data={data}/>
    </VictoryChart>

victorybar는 바 형태를 그려주고
만약 선 그래프를 원한다면 victoryline 컴포넌트를 이용해주어야 한다.

const data ={[
              { x: '2022-02-01', y: 6 },
              { x: '2022-02-02', y: 4 },
            ]}

<VictoryLine
            name="main"
            style={{
              data: { stroke: COLORS.YELLOW },
              parent: { border: '1px solid #ccc' },
            }}
            data={dailyData}
          />

data값에 값이 여러개 들어가거나 동적으로 바뀌는 것을 생각해 따로 위에서 변수로 지정해주는 편이 좋다.

오늘은 하루종일 차트 라이브러리인 victory를 붙잡고 있었다.
데이터를 가공해서 동적으로 받아오는 과정이 너무 어려웠다. victory를 처음 다뤄봐서 처음부터 공식 문서를 읽어보면서 공부했다. 현재 동적으로 데이터 받아오는 작업은 마치고 axis에도 처리해야할 조건들이 많아서 궁부중이다.