[react][strokeDasharray][strokeDashoffset]도넛차트

strokeDasharray

<circle
              cx="110"
              cy="110"
              r="90"
              fill="none"
              stroke="yellow"
              strokeWidth="40"
              strokeDasharray={[30,5]}
            />

setDasharray에는 배열이 들어간다.

첫번째 요소에는 원의 길이,

두번째 요소에는 비어있는 길이이다.

strokeDashoffset

setDashoffset에는 원이 시작되는 위치를 지정한다.

연두색이 시작되는 부분은 전체길이-빨간길이이다.

도넛차트

• 데이터 불러오기

const [inout,setInout] = useState(0.25);
const [deposit,setDeposit] = useState(0.25);
const [saving,setSaving] = useState(0.25);
const [ensurance,setEnsurance] = useState(0.25);
useEffect(()=>{
    fetch("<http://localhost:9090/bank/myGoods>").then(res=>res.json()).then(
        res=>{
                let length = res.length;
                let inoutLength = 0;
                let deLength = 0;
                let saLength = 0;
                let enLength = 0;
                res.forEach(r=>{
                  if(r.typeId==110){
                    inoutLength++;
                  }else if(r.typeId==220){
                    deLength++;
                  }else if(r.typeId==330){
                    saLength++;
                  }else{
                    enLength++;
                  }
                });
                setTimeout(() => {
                  setInout(inoutLength/length);
                setDeposit(deLength/length);
                setSaving(saLength/length);
                setEnsurance(enLength/length);
                }, 1000);
                
                
            }
        );
    })

상태변수의 초기값은 0.25이다.

setTimeout을 이용해 1초 뒤에 상태변수를 변경해준다.

const Circle = ()=>{
        return<div>
        <div style={{ width: '10vw', height: '10vw' }}>
          <svg viewBox="0 0 250 250">
            <circle 
                cx="110"
                cy="110" 
                r="90" 
                fill="none" 
                stroke="beige" 
                strokeWidth="40" 
                strokeDasharray={[2*Math.PI*90*inout,2*Math.PI*90*(1-inout)]}
                strokeDashoffset={2*Math.PI*90*0}
                />
            <circle
              cx="110"
              cy="110"
              r="90"
              fill="none"
              stroke="green"
              strokeWidth="40"
              strokeDasharray={[2*Math.PI*90*deposit,2*Math.PI*90*(1-deposit)]}
                strokeDashoffset={2*Math.PI*90*(1-inout)}
            />
             <circle
              cx="110"
              cy="110"
              r="90"
              fill="none"
              stroke="yellow"
              strokeWidth="40"
              strokeDasharray={[2*Math.PI*90*saving,2*Math.PI*90*(1-saving)]}
                strokeDashoffset={2*Math.PI*90*(1-inout-deposit)}
            /> <circle
            cx="110"
            cy="110"
            r="90"
            fill="none"
            stroke="red"
            strokeWidth="40"
            strokeDasharray={[2*Math.PI*90*ensurance,2*Math.PI*90*(1-ensurance)]}
            strokeDashoffset={2*Math.PI*90*(1-inout-deposit-saving)}
          />
          </svg>
        </div>
      </div>;
    }
    return(
        <Box><Circle></Circle>
        
        </Box>
    );

완성