막대, 반원 그래프 사용방법

[tkv00]

막대그래프

• 다음과 같이 Container같은 컴포넌트로 Graph컴포넌트를 감싸줍니다.
• data state에 서버로부터 받은 data를 전달합니다.

<Container>
        <Graph data={data} />
 </Container>

const Container = styled.div`
  height: 20rem;
  width: 60rem;
`;

반원 그래프

• 다음코드와 같이 서버로부터 목표 금액 및 현재 금액을 불러온 데이터를 props로 CircleGraph에 넘겨줍니다.
• 높이와 너비를 props로 넘겨줍니다.

  const goalAmount = 100; // 목표 금액
  const currentAmount = 85; // 현재 금액
  const chartWidth = 260; // 원하는 가로 크기
  const chartHeight = 120; // 원하는 높이

<CircleGraph
        goalAmount={goalAmount}
        currentAmount={currentAmount}
        width={chartWidth}
        height={chartHeight}
 />

일별 그래프

막대 그래프와 동일