[SVG] SVG를 이용한 gauge 차트 만들기

안녕하세요 :)

오늘은 게이지 차트를 아래와 같이 만들어 보았습니다.

 

고등학교 때 배운 삼각함수 개념정도만 이해하고 있으면 차트를 만드는데 큰 어려움은 없습니다.

 

1. 삼각함수를 이용해 좌표값 구하기

게이지 차트를 위해 가장 중요한 좌표는 게이지가 끝나는 지점 (sx, sy)입니다.

(s는 starting의 약어인데 적절하지 않은 변수명이네요 ㅠㅠ)

코사인 세타에 반지름을 곱하면 cx에서 sx까지의 거리값이 나옵니다. 여기에다 중앙값인 cx값을 더하면 sx값이 구해지게 됩니다.

y좌표도 마찬가지 방법으로 구했습니다.

 

2. SVG 태그를 이용해 호 그리기

이부분이 살짝 어려운데요, 공식문서를 찾아보면 Arc를 그리는 방법에 대해 설명이 되어 있습니다.

SVG에서 Arc를 그리기 위해서는 꽤나많은 파라미터를 받게 되는데요, 필연적으로 두 점을 지나는 원이 4개가 그려질 수 있기 때문에 어떤 호를 그릴지 특정하기 위해서라고 합니다.

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

 

마지막 최종 코드는 아래와 같습니다.

const GaugeChart = ({
  score=0,
  width=200,
  height=100,
  strokeWidth=30,
  color
}) => {
  if (score > 100) score = 100
  if (score < 0) score = 0
  const score_ = score/100 * 180

  const cx = width/2;
  const cy = height - 10;
  const r = width/2 - strokeWidth/2 - 10;

  const x1 = cx - r * Math.cos(Math.PI/180 * 0);
  const y1 = cy - r * Math.sin(Math.PI/180 * 0);
  const x2 = cx + r * Math.cos(Math.PI/180 * (180 - score_));
  const y2 = cy - r * Math.sin(Math.PI/180 * (180 - score_));
  const x3 = cx + r * Math.cos(Math.PI/180);
  const y3 = cy - r * Math.sin(Math.PI/180);

  return(
    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height+30} viewBox={`0 0 ${width} ${height}`} fill="none">

      <g>
        <path 
          className="bg"
          d={`
            M ${cx}, ${cy}                   
            M ${x1}, ${y1}                    
            A ${r}, ${r} 0 0 1 ${x3}, ${y3}
            `}   
          stroke="white"
          strokeWidth={strokeWidth}
        />
      </g>
      
      <path 
        d={`
          M ${cx}, ${cy}
          M ${x1}, ${y1}    
          A ${r}, ${r} 0 0 1 ${x2}, ${y2}
          `}
        fill="none"
        stroke={color}
        strokeWidth={strokeWidth}
      />
    
    </svg>
  )
}