[react] 리액트로 css, js로 도넛차트 구현

react 도넛 차트

 

 react 로  css,  js 를 이용하여

도넛차트를 구현합니다. 

 

아래의 포스트에서, 라이브러리 없이,  css와 js 만으로 도넛차트를 구현 하였는데,
이것을 react 버전으로 만들어 보았습니다. 

https://goddino.tistory.com/191

[js] css, js 이용하여 도넛차트 만들기 (ft. 원형차트, conic-gradient)

 

import React, { useEffect, useRef } from 'react';

const Chart = () => {
  const chart1 = useRef(null);
  const chart2 = useRef(null);
  const chart3 = useRef(null);

  const chartData = [{
      chartNo: chart1,
      percent: 80,
      bgColor: '#F5D042'
    },
    {
      chartNo: chart2,
      percent: 40,
      bgColor: '#0A174E'
    },
    {
      chartNo: chart3,
      percent: 30,
      bgColor: '#EC8B5E'
    },
  ]

  useEffect(() => {
    chartData.map((row: any) => {
      makeChart(row.percent, row.chartNo, row.bgColor);
    })
  }, []);

  let i = 1;
  const makeChart = (percent: number, className: any, color: string) => {

    let func1 = setInterval(function() {
      if (i < percent) {
        if (className.current) {
          colorFn(i, className, color);
          i++;
        } else { //cannot read property 'style' of null 때문에 분기 처리
          return;
        }
      } else {
        clearInterval(func1);
      }
    }, 10);
  }

  const colorFn = (i: number, className: any, color: string) => {
    className.current.style.background = 
    "conic-gradient(" + color + " 0% " + i + "%, #dedede " + i + "% 100%)";
  }

  return (

    <div>
      <div ref = {chart1}>
          <div> {chartData[0].percent} % </div>
      </div>
      <div ref = {chart2}>
      	<div> {chartData[1].percent} % </div>
      </div>
      <div ref = {chart3} >
          <div> {chartData[2].percent} % </div> 
      </div>
    </div>
  );
};

export default Chart;