[react][circle][svg]도넛차트 만들기

svg태그와 circle태그로 원그리기

<svg width="500" heigth="500" viewBox="0 0 100 100">
	<circle cx="50" cy="50" r="20" fill="none" stroke="blue" stroke-width="10">
	</circle>
</svg>

• viewBox: svg 태그 내부의 좌표를 정의해준다 0 0 100 100이면 가로 0~100, 세로 0~100의 좌표를 정의한 것이다.
• cx: 원의 중심 x좌표
• cy: 원의 중심 y좌표
• r: 원의 지름 px단위다
• fill: 원 내부
• stroke: 원의 경계선 색
• stroke-width: 원의 경계선 너비
• stroke-dasharray: 얼마나 채울지, 얼마나 비울지 정의
• stroke-dashoffset: 어디서부터 원을 시작할 것인지 정의

사분할 원 그리기

const Donut = ()=>{
    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=>{
                setInout(res.inout);
                setDeposit(res.deposit);
                setSaving(res.saving);
                setEnsurance(res.ensurance);

            }
        );
    })
    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*0.25,2*Math.PI*90*0.75]}
                strokeDashoffset={0}/>
            <circle
              cx="110"
              cy="110"
              r="90"
              fill="none"
              stroke="green"
              strokeWidth="40"
              strokeDasharray={[2*Math.PI*90*0.25,2*Math.PI*90*0.75]}
                strokeDashoffset={2*Math.PI*90*0.25}
            />
             <circle
              cx="110"
              cy="110"
              r="90"
              fill="none"
              stroke="yellow"
              strokeWidth="40"
              strokeDasharray={[2*Math.PI*90*0.25,2*Math.PI*90*0.75]}
                strokeDashoffset={2*Math.PI*90*0.5}
            /> <circle
            cx="110"
            cy="110"
            r="90"
            fill="none"
            stroke="red"
            strokeWidth="40"
            strokeDasharray={[2*Math.PI*90*0.25,2*Math.PI*90*0.75]}
            strokeDashoffset={2*Math.PI*90*0.75}
          />
          </svg>
        </div>
      </div>;
    }

지금은 네 개로 균등 분할 된 원이지만 데이터 입력에 따라 비율이 바뀌게 하기 위해 비율을 상태 변수로 정의했다.

strokeDasharray={[2*Math.PI*90*0.25,2*Math.PI*90*0.75]}
strokeDashoffset={0}

90이 반지름이므로 2Math.PI90은 원주에 해당한다.

1/4의 면적을 표시할 것이므로

얼마나 채울지에 2Math.PI90*0.25를 지정한다.

얼마나 비울지는 원주-채울면적에 해당하는 2Math.PI90*0.75를 지정한다.

stokeOffset에는 시작 지점을 지정한다.