Flutter - 레이더 차트 그리기 (flutter_radar

Overview

이 포스팅에서는 레이더 차트를 그리기 위해서 flutter_radar_chart 패키지를 사용한다.

아래는 내가 진행중인 토이 프로젝트에서 사용한 레이더 차트의 사용 화면이다.

데이터를 입력하면 입력한 내용을 레이더 차트로 시각화하여 보여주는 간단한 페이지이다.

flutter_radar_chart 패키지를 이용하여 레이더 차트를 그리는 기본 사용 방법 및 설정에 대해 알아보자.

포스팅에서 설명한 예제는 아래의 깃허브에서 다운로드 가능하다.

https://github.com/luvris2/flutter-example/tree/main

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
  - 차트의 각 개인을 구성하는 데 사용되는 데이터 포인트 목록
  - 데이터 포인트 수는 피처 수와 일치해야 함
  - 차트에 표시되는 데이터 포인트 수는 피처와 동일하게 제한 없이 추가 가능
  - 데이터가 많으면 그래프 표현이 어려울 수 있으므로 개수는 조절하여 사용

레이더 차트 커스터마이징 : 색상 변경하기

주의사항

라이트 모드, 다크 모드를 사용하면 색상을 변경할 수 없다.

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
- 차트를 표시하는 다각형의 형태를 설정
- 양의 정수로 입력하며 기본적으로는 원으로 표시되지만 설정 시 다각형으로 표시된다.
- 꼭 피처 수와 동일하게 설정할 필요는 없다.

<왼쪽부터 차례대로 다각형 설정을 3, 4, 6, 8로 설정하여 표시한 레이더 차트 화면>

참고

저작자표시 동일조건

Flutter - 레이더 차트 그리기 (flutter_radar_chart)