Skip to content

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

@tkv00

Description

@tkv00

막대그래프

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

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

반원 그래프

  • 다음코드와 같이 서버로부터 목표 금액 및 현재 금액을 불러온 데이터를 propsCircleGraph에 넘겨줍니다.
  • 높이와 너비를 props로 넘겨줍니다.
  const goalAmount = 100; // 목표 금액
  const currentAmount = 85; // 현재 금액
  const chartWidth = 260; // 원하는 가로 크기
  const chartHeight = 120; // 원하는 높이

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

일별 그래프

막대 그래프와 동일

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentation

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions