React 도넛그래프 만들기

LOL게임의 전적사이트에 승률을 나타낼 도넛그래프를 넣고자 한다.

차트를 넣을 수 있는 라이브러리는 정말 많이 있지만, 나는 애니메이션이나 여러 효과없이 간단한 도넛차트만을 넣을 것이므로 그래서 react-donut-chart 라는 라이브러리를 사용할 것이다.

다음은 react-donut-chart의 npm 사이트이다.
react-donut-chart

우선 설치를 해주자.

npm install react-donut-chart --save

그리고 Piechart 컴포넌트를 만들어주고, props로 차트의 각 영역의 value를 받자!
(원한다면 label도 받을 수 있다.)

import React from "react";
import DonutChart from "react-donut-chart";

type Idata = {
  win: number;
  defeat: number;
};

export const Piechart: React.FC<Idata> = ({ win, defeat }) => {
  return (
    <DonutChart
      data={[
        {
          label: "패배",
          value: defeat,
        },
        {
          label: "승리",
          value: win,
        },
      ]}
      colors={["#f76b8a", "#13D8F6"]}
      interactive={false}
      width={250}
      legend={false}
      strokeColor={"none"}
    />
  );
};

소제목, 차트의 border, interactive 등등을 나는 false로 하였다.

자세한 사용방법은 npm에서 props를 확인해보자.