Flutter - 레이더 차트 그리기 (flutter_radar_chart)
Overview
이 포스팅에서는 레이더 차트를 그리기 위해서 flutter_radar_chart 패키지를 사용한다.
아래는 내가 진행중인 토이 프로젝트에서 사용한 레이더 차트의 사용 화면이다.
데이터를 입력하면 입력한 내용을 레이더 차트로 시각화하여 보여주는 간단한 페이지이다.
flutter_radar_chart 패키지를 이용하여 레이더 차트를 그리는 기본 사용 방법 및 설정에 대해 알아보자.
포스팅에서 설명한 예제는 아래의 깃허브에서 다운로드 가능하다.
GitHub - luvris2/flutter-example
Contribute to luvris2/flutter-example development by creating an account on GitHub.
github.com
레이더 차트 (Radar Chart)
우선 레이더 차트가 무엇인지부터 알아보자.
- 어떤 측정 목표에 대한 평가항목이 여러 개일 때 항목 수에 따라 원을 같은 간격으로 나누고, 중심으로부터 일정 간격으로 척도를 재는 칸을 나누어 각 평가항목의 정량화된 점수에 따라 그 위치에 점을 찍고 평가항목간 점을 이어 선으로 만들어 항목 간 균형을 한눈에 볼 수 있도록 해주는 도표이다.
- 보통 레이더 도표, 레이더 차트, 레이더 그래프, 스파이더 차트, 방사형 차트, 거미줄 차트라고도 부른다.
- 레이더 차트를 활용하면 각 항목간 비율뿐만 아니라 균형과 경향을 직관적으로 알 수 있고, 장단점을 쉽게 파악할 수 있어서 편리하다.
플러터에서 레이더 차트 그리기 (기본)
flutter_radar_chart 패키지 추가하기
터미널에서 패키지 설치 명령어를 실행한다.
flutter pub add flutter_radar_chart
아래와 같이 Changed 1 dependency! 가 출력된다면 정상적으로 추가된 것이다.
구문 (사용 방법)
RadarChart(
ticks: ticks, // 차트 축 간격
features: features, // 각각의 데이터 이름
data: data, // 각 데이터 이름의 세부 수치
),
/* 휴대폰 낮/밤 모드에 따라 차트 설정 가능
* 라이트 모드 : RadarChart.light 사용
* - 라이트 모드일 경우, 차트 색상의 기본색은 검은색
* 다크 모드 : RadarChart.dark 사용
* - 다크 모드일 경우, 차트 색상의 기본색은 흰색
* 예시) 라이트 모드로 레이더 차트 그리기
**************************************
* RadarChart.light(
* ticks: ticks,
* features: features,
* data: data,
* ),
**************************************
*/- 위젯 호출
- RadarChart() : 위젯 생성, 기본값은 라이트 모드
- 낮/밤 모드에 따라 위젯을 호출할 수 있음 (낮 : RadarChart.light() / 밤 RadarChart.dark() )
- 단, 낮/밤 모드의 레이더 차트 사용 시 축 밑 데이터 표시 범위 색상 변경은 불가능
/* 파라미터 정의 예시 */
// 축 표시 간격
var ticks = [7, 14, 21, 28, 35];
// 각각의 데이터 이름
var features = ["AA", "BB", "CC", "DD", "EE", "FF", "GG", "HH"];
// 각 데이터 이름의 세부 수치
var data = [
[10.0, 20, 28, 5, 16, 15, 17, 6],
[14.5, 1, 4, 14, 23, 10, 6, 19]
];- 필수 파라미터
- ticks
- 차트의 숫자 축을 정의
- 각 틱은 윤곽선을 생성
- 틱으로 정의된 숫자 범위를 사용하여 표시
- features
- 차트의 각 개인에 대한 수치변수를 정의
- 수치변수는 제한 없이 추가 가능
- data
- 차트의 각 개인을 구성하는 데 사용되는 데이터 포인트 목록
- 데이터 포인트 수는 피처 수와 일치해야 함
- 차트에 표시되는 데이터 포인트 수는 피처와 동일하게 제한 없이 추가 가능
- 데이터가 많으면 그래프 표현이 어려울 수 있으므로 개수는 조절하여 사용
- ticks
레이더 차트 커스터마이징 : 색상 변경하기
주의사항
라이트 모드, 다크 모드를 사용하면 색상을 변경할 수 없다.
RadarChart() 그대로를 사용하여 위젯을 생성하여야 한다.
데이터를 표시하는 범위의 색 변경하기
RadarChart(
graphColors : [] // 리스트 타입으로 색상을 나열
);
/* 레이더 차트 데이터 표시 부분 색상 변경 예시
RadarChart(
// 데이터 표시 범위 색상 변경 : 리스트 타입으로 색상을 나열
graphColors: const [
Colors.red, // 첫 번째 피처 데이터는 빨간색으로 표시
Colors.yellow, // 두 번째 피처 데이터는 노란색으로 표시
],
);
*/- graphColors
- 리스트 타입으로 색상을 정의
- 색상이 한 개만 정의되어 있을 경우, 피처(데이터) 수가 여러개여도 한 개의 색상으로만 표현
- 피처의 식별을 위해 피처의 수만큼 색상을 차례로 정의해주는 것이 좋음
축 간격 표시 색상 변경하기
RadarChart(
axisColor : // 색상 입력
);
/* 레이더 차트 축 색상 변경 예시
RadarChart(
axisColor: Colors.green, // 축 색상 변경 : 초록색
);
*/- axisColor
- 축 간격을 표시할 색상 정의
차트 테두리 색상 변경하기
RadarChart(
outlineColor : // 색상 입력
);
/* 레이더 차트 축 색상 변경 예시
RadarChart(
outlineColor: Colors.blue, // 차트 테두리 색상 변경 : 파란색
);
*/- outlineColor
- 차트 테두리를 표시할 색상 정의
축 간격 표시 글꼴 색상 변경하기
RadarChart(
ticksTextStyle : TextStyle(color: , fontSize: ) // 색상과 글꼴 크기 입력
);
/* 레이더 차트 축 표시 글꼴 색상 변경 예시
RadarChart(
// 축 표시 글꼴 색상 변경 : 폰트 크기 16인 초록색 글씨
ticksTextStyle: const TextStyle(color: Colors.green, fontSize: 16),
);
*/- ticksTextStyle
- TextStyle로 입력하여 글꼴을 원하는대로 설정
- 단, 색상(color)값과 글꼴 크기(fontSize)값을 주지 않으면 글꼴이 보이지 않을 수 있다.
피처(데이터) 표시 글꼴 색상 변경하기
RadarChart(
featuresTextStyle : TextStyle(color: , fontSize: ) // 색상과 글꼴 크기 입력
);
/* 레이더 차트 피처 표시 글꼴 색상 변경 예시
RadarChart(
// 피처 표시 글꼴 색상 변경 : 폰트 크기가 20이고 굵은 파란색 글씨
featuresTextStyle: const TextStyle(
color: Colors.blue,
fontSize: 20,
fontWeight: FontWeight.bold,
),
);
*/- featuresTextStyle
- TextStyle로 입력하여 글꼴을 원하는대로 설정
- 단, 색상(color)값과 글꼴 크기(fontSize)값을 주지 않으면 글꼴이 보이지 않을 수 있다.
그 외 레이더 차트 커스터마이징
축 간격 수치 반전하기
RadarChart(
reverseAxis : // true OR false
);
/* 레이더 차트 축 표시 값 반전 예시
RadarChart(
// 축 표시 값 반전 : 기본값 false
reverseAxis: true,
);
*/- reverseAxis
- 축 간격의 수치를 반전하여 표시, 기본값은 false
- bool 값 입력 : true OR false
- 즉, 축 표시 간격이 [7, 14, 21, 28, 35]일 경우에는 중심축으로부터 7부터 시작하지만 true일 경우에는 중심축으로부터 35부터 시작하여 내림차순으로 간격을 보여준다.
차트 다각형 형태 변경하기
RadarChart(
sides : // 양의 정수 입력
);
/* 레이더 차트 다각형 설정 예시
RadarChart(
// 다각형 설정 : 팔각형으로 설정
sides: 8,
);
*/
- sides
- 차트를 표시하는 다각형의 형태를 설정
- 양의 정수로 입력하며 기본적으로는 원으로 표시되지만 설정 시 다각형으로 표시된다.
- 꼭 피처 수와 동일하게 설정할 필요는 없다.
참고