[Project/ReactTS] Chart.js로 원형 차트(Doughnut Chart) 구현

아래와 동일하게 원형 차트를 구현하고자 한다.

 

Setting

npm install chartjs

npm install --save chart.js react-chartjs-2

chartjs 라이브러리를 설치한다

 

기본적인 DoughnutChart 컴포넌트 작성

일단 정적 데이터를 기반으로 차트를 그려봤다. 차트 컴포넌트는 'data' props를 필수적으로 포함해야 한다. 차트에 필요한 데이터는 string 배열 'labels'와 number 배열 'data'이다. 아래 예시는 ['가','나','다','라','마'] 와 [1,2,3,4,5] 로 데이터를 설정하였다.  

DoughnutChart.tsx

import { Chart as ChartJS, ArcElement, Tooltip} from 'chart.js';

import { Doughnut } from 'react-chartjs-2';

export default function DoughnutChart() {

    ChartJS.register(ArcElement, Tooltip);

    const data = {

        labels: ['가','나','다','라','마'],

        datasets: [

           {

              label: '동의 수',

              data: [1,2,3,4,5],

              backgroundColor: ['#010101', '#868686', '#3A3A3A', '#C7C7C7', '#E9E9E9'],

              borderColor: ['#010101', '#868686', '#3A3A3A', '#C7C7C7', '#E9E9E9'],

           },

        ],

         },

     };

    return(<Doughnut data={data} />)

}

 

데이터 라벨에 비율 삽입

chartjs-plugin-datalabels 라이브러리를 설치해야 한다.

npm install chartjs-plugin-datalabels --save

formatter를 통해 데이터라벨에 나타낼 값을 가공한다. 아래 예시는 비율이 나타나도록 하였다.

import { Chart as ChartJS, ArcElement, Tooltip} from 'chart.js';

import { Doughnut } from 'react-chartjs-2';

import ChartDataLabels from 'chartjs-plugin-datalabels'; // 추가

export default function DoughnutChart() {

    ChartJS.register(ArcElement, Tooltip, ChartDataLabels);  // 추가

    const data = {

        labels: ['가','나','다','라','마'],

        datasets: [

           {

              label: '동의 수',

              data: [1,2,3,4,5],

              backgroundColor: ['#010101', '#868686', '#3A3A3A', '#C7C7C7', '#E9E9E9'],

              borderColor: ['#010101', '#868686', '#3A3A3A', '#C7C7C7', '#E9E9E9'],

              datalabels: {  // 추가

                color: 'white',

                font: {

                   size: 15,

                },

                formatter: (value: number) => {

                    const percentage = `${Math.floor((value / 15) * 100)}%`;

                    return percentage;

                 },

             },

           },

        ],

     };

    return(<Doughnut data={data} />)

}

 

차트 중앙에 총합 표시

차트 컴포넌트에 'plugins' props를 작성하여 차트 중앙에 텍스트를 배치한다. 'plugins' props의 타입은 배열이고, textCenter 객체 변수를 따로 선언하여 plugins 배열에 넣어줬다.

import { Chart as ChartJS, ArcElement, Tooltip} from 'chart.js';

import { Doughnut } from 'react-chartjs-2';

import ChartDataLabels from 'chartjs-plugin-datalabels';

export default function DoughnutChart() {

    ChartJS.register(ArcElement, Tooltip, ChartDataLabels);

    const data = {

        labels: ['가','나','다','라','마'],

        datasets: [

           {

              label: '동의 수',

              data: [1,2,3,4,5],

              backgroundColor: ['#010101', '#868686', '#3A3A3A', '#C7C7C7', '#E9E9E9'],

              borderColor: ['#010101', '#868686', '#3A3A3A', '#C7C7C7', '#E9E9E9'],

              datalabels: { 

                color: 'white',

                font: {

                   size: 15,

                },

                formatter: (value: number) => {

                    const percentage = `${Math.floor((value / 15) * 100)}%`;

                    return percentage;

                 },

             },

           },

        ],

     };

     const textCenter = {  // 추가

        id: 'textCenter',

        afterDatasetsDraw: (chart: ChartJS<'doughnut', number[], unknown>) => {

           const ctx = chart.ctx;

           const xCoor = chart.chartArea.left + (chart.chartArea.right - chart.chartArea.left) / 2;

           const yCoor = chart.chartArea.top + (chart.chartArea.bottom - chart.chartArea.top) / 2;

           let total = 0;

           chart.data.datasets[0].data.forEach((item) => {

              if (typeof item === 'number') {

                 total += item;

              }

           });

           ctx.save();

           ctx.font = 'bold 20px sans-serif';

           ctx.textAlign = 'center';

           ctx.textBaseline = 'middle';

           ctx.fillText(`${total}명`, xCoor, yCoor);

        },

     };

    return(<Doughnut data={data} plugins={[textCenter]}/>)  // 추가

}

 

차트 데이터 부모로부터 받아오기

부모로부터 차트 데이터와 총합을 받아올 수 있도록 작성하였다. 차트 데이터는 labels와 data 프로퍼티를 지닌 객체다.

DoughnutChart.tsx

import { Chart as ChartJS, ArcElement, Tooltip} from 'chart.js';

import { Doughnut } from 'react-chartjs-2';

import ChartDataLabels from 'chartjs-plugin-datalabels';

export interface IChartData {

    labels: string[];

    data: number[];

 }

export default function DoughnutChart({chartData, sum} : {chartData: IChartData, sum: number}) {

    ChartJS.register(ArcElement, Tooltip, ChartDataLabels);

    const data = {

        labels: chartData.labels,

        datasets: [

           {

              label: '동의 수',

              data: chartData.data,

              backgroundColor: ['#010101', '#868686', '#3A3A3A', '#C7C7C7', '#E9E9E9'],

              borderColor: ['#010101', '#868686', '#3A3A3A', '#C7C7C7', '#E9E9E9'],

              datalabels: {

                color: 'white',

                font: {

                   size: 15,

                },

                formatter: (value: number) => {

                    const percentage = `${Math.floor((value / sum ) * 100)}%`;

                    return percentage;

                 },

             },

           },

        ],

     };

     const textCenter = {

        id: 'textCenter',

        afterDatasetsDraw: (chart: ChartJS<'doughnut', number[], unknown>) => {

           const ctx = chart.ctx;

           const xCoor = chart.chartArea.left + (chart.chartArea.right - chart.chartArea.left) / 2;

           const yCoor = chart.chartArea.top + (chart.chartArea.bottom - chart.chartArea.top) / 2;

           let total = 0;

           chart.data.datasets[0].data.forEach((item) => {

              if (typeof item === 'number') {

                 total += item;

              }

           });

           ctx.save();

           ctx.font = 'bold 20px sans-serif';

           ctx.textAlign = 'center';

           ctx.textBaseline = 'middle';

           ctx.fillText(`${total}명`, xCoor, yCoor);

        },

     };

    return(<Doughnut data={data} plugins={[textCenter]}/>)

}

App.tsx

import "./App.css";

import DoughnutChart from "./DoughnutChart";

function App() {

  const chartData = {

    labels: ['가','나','다','라','마'],

    data: [1,2,3,4,5]

  }

  const getSum = (data: number[]) => {

    let sum = 0

    data.forEach((item) => {

      sum += item

    })

    return sum

  }

  return (

      <DoughnutChart chartData={chartData} sum={getSum(chartData.data)}/>

  );

}

export default App;

 

이와 같이 정적인 데이터를 기반으로 차트를 구현하였다.

 

동적인 데이터 기반 차트 구현

만약 버튼을 클릭하였을 때 차트의 데이터가 변경된다면 변경사항이 차트에 반영되기 위해서는 리렌더링이 필요하다.

앞서 만든 DoughnutChart 컴포넌트는 부모로부터 받아온 data가 변경되면 리렌더링되므로 부모 컴포넌트에서 알맞게 data를 전달하기만 하면 된다.

그래서 버튼의 클릭시 차트 업데이트를 알리기 위해 아래와 같이 정의하였다

const [updatePost, setUpdatePost] = useState(false);

 

그리고 useEffect Hook을 통하여 updatePost의 값이 변경될 때 다시 post를 불러오도록 하여 변경사항이 반영되게 하였다.

   useEffect(() => {

      if (post !== undefined) {

         getSum(post);

         processData(post.statisticList);

      }

   }, [post, updatePost]);

 

대략적인 코드 (생략 존재)

export default function PetitionDetail() {

   const [updatePost, setUpdatePost] = useState(false);

   const [chartData, setChartData] = useState({ labels: [''], data: [0] });

   const { post: petition, postId } = useFetchPost<IPetition>({

      api: API_PATH.POST.PETITION.ROOT,

      update: updatePost,

   });

   const [sum, setSum] = useState(0);

   // 총합 구하기

   const getSum = (post: IPetition) => {

      setSum(0);

      return post.statisticList.forEach((item) => setSum((prev) => prev + item.agreeCount)); // 단과대 총 투표수

   };

  // 처음에 청원글 불러올 경우와 업데이트 값 변경시 실행

  useEffect(() => {

      if (petition !== undefined) {

         getSum(petition);

         processData(petition.statisticList);

      }

   }, [petition, updatePost]);

   // 데이터 가공

   const processData = (data: IPetitionStatistic[]) => {

      setChartData({ labels: [], data: [] }); // 차트 초기화

      /* 단과대 투표 데이터 가공 */

      data.forEach((item) => {

         setChartData((prev) => {

            return {

               labels: [...prev.labels, item.department],

               data: [...prev.data, item.agreeCount],

            };

         });

      });

   };

   // 동의 버튼 클릭 데이터 전송

   const handlePostAgree = async () => {

      try {

         await post(`${API_PATH.POST.PETITION.AGREE.ID(postId!)}`, null, {

            authenticate: true,

         });

         setUpdatePost(true);

      } catch (error) {

         alert;

      }

   };

   // 동의 버튼 클릭 이벤트 함수

   const handleAgreeButtonClick = () => {

      if (petition?.agree) {

         alert('이미 동의하셨습니다');

      } else {

         handlePostAgree();

      }

   };

   return (

      <>

         {petition !== undefined && (

            <>

 

                     <PostBox>

                        <Text length={4}>어떤 과에서 가장 동의를 많이 했을까요?</Text>

                        <hr />

                        <DoughnutChart chartData={chartData} sum={sum} />

                        <PetitonChartList statisticList={petition.statisticList} sum={sum} />

                     </PostBox>

               {/* 플로팅 버튼 */}

               <FloatingButton

                  event={() => {

                     handleAgreeButtonClick();

                  }}

               >

                  {petition.agree ? (

                     <TbThumbUpFilled color='white' size={40} />

                  ) : (

                     <TbThumbUp color='white' size={40} />

                  )}

               </FloatingButton>

             </>

         )}

      </>

   );

}

완성 !!