[React Native] react-native-svg ProgressCircle로 시계 나타내는 법 / startAngle, endAngle

1. 라이브러리

https://github.com/JesperLekland/react-native-svg-charts

JesperLekland/react-native-svg-charts

2. ProgressCircle Usage

- 10시~3시, 6시~12시 같은 일정이 있으면 그 시간만큼이 채워진 원형 그래프를 그리고 싶었다. 

- 딱 적합한 것이 ProgressCircle이었다.

- 먼저 문서 그대로 사용해보면 이렇게 보인다.

 

* 코드

            <ProgressCircle
              style={{width: 200, height: 200}}
              progress={0.7}
              progressColor={'rgb(134, 65, 244)'}
            />

* 결과

 

- 특정 시간대를 이 원형그래프로 나타내려면 어떻게 해야할까?

- startAngle과 endAngle을 이용하면 된다.

- 그리고 위 결과 사진처럼 남은 0.3은 빈 곳으로 채워지지 않고 딱 시간이 포함하는 만큼만 원형그래프를 그리고 싶다.

- 그러려면 progress값은 항상 1이어야 한다.

 

- 0시~6시를 표현해보자!

* 코드

            <ProgressCircle
              style={{width: 200, height: 200}}
              progress={1}
              progressColor={'rgb(134, 65, 244)'}
              startAngle={Math.PI * 0}
              endAngle={Math.PI * 1.0}
            />

* 결과

 

- 6시~15시를 표현해보자!

* 코드

            <ProgressCircle
              style={{width: 200, height: 200}}
              progress={1}
              progressColor={'rgb(134, 65, 244)'}
              startAngle={Math.PI * 1.0}
              endAngle={Math.PI * 2.5}
            />

*결과

 

=> startAngle: 시작각도 / endAngle: 끝 각도

[0시~3시]

startAngle={Math.PI * 0}

endAngle={Math.PI * 0.5}

 

[3시~6시]

startAngle={Math.PI * 0.5}

endAngle={Math.PI * 1}

 

[6시~12시]

startAngle={Math.PI * 1}

endAngle={Math.PI * 2}

 

[9시~15시]

startAngle={Math.PI * 1.5}

endAngle={Math.PI * 2.5}

 

이런 식으로 사용하면 된다!