Flutter에서 Radar Chart 사용법

Radar Chart(레이더 차트)는 여러 변수를 비교할 때 유용하게 사용되는 시각화 도구입니다. 여러 축을 기준으로 데이터를 표시하여 항목 간의 성능, 능력, 특성 등을 시각적으로 비교할 수 있습니다. 예를 들어, 스포츠 선수의 능력치나 제품의 특성을 비교할 때 사용됩니다. 이번 글에서는 fl_chart 라이브러리를 사용해 Flutter에서 Radar Chart를 구현하는 방법을 설명하겠습니다.

1. Radar Chart 구현을 위한 fl_chart 패키지 설치

Radar Chart를 구현하기 위해 fl_chart 라이브러리를 사용합니다. pubspec.yaml 파일에 fl_chart 패키지를 추가하여 설치합니다.

dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.40.0  # 최신 버전으로 설정

설정 후, 다음 명령어로 패키지를 설치합니다.

flutter pub get

2. 기본적인 Radar Chart 구현

Radar Chart는 여러 축을 가진 그래프에서 데이터를 폴리곤 형태로 연결하여 시각화합니다. fl_chart 라이브러리의 RadarChart 위젯을 사용하여 기본적인 레이더 차트를 그릴 수 있습니다.

2.1 기본 Radar Chart 구현 예제

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RadarChartExample(),
    );
  }
}

class RadarChartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Radar Chart Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: RadarChart(
          RadarChartData(
            dataSets: [
              RadarDataSet(
                dataEntries: [
                  RadarEntry(value: 3),
                  RadarEntry(value: 2),
                  RadarEntry(value: 5),
                  RadarEntry(value: 4),
                  RadarEntry(value: 3),
                ],
                borderColor: Colors.blue,
                fillColor: Colors.blue.withOpacity(0.3),
                entryRadius: 2.5,  // 데이터 포인트의 크기
                borderWidth: 2,  // 선의 두께
              ),
            ],
            radarBackgroundColor: Colors.white,  // 레이더 차트 배경색
            radarBorderData: BorderSide(color: Colors.black, width: 2),  // 차트 테두리
            gridBorderData: BorderSide(color: Colors.grey),  // 그리드 라인 색상
            titlePositionPercentageOffset: 0.1,  // 제목 위치
            titleTextStyle: TextStyle(fontSize: 12, color: Colors.black),  // 제목 텍스트 스타일
            getTitle: (index) {
              switch (index) {
                case 0:
                  return 'Speed';
                case 1:
                  return 'Strength';
                case 2:
                  return 'Agility';
                case 3:
                  return 'Endurance';
                case 4:
                  return 'Intelligence';
                default:
                  return '';
              }
            },
            radarShape: RadarShape.polygon,  // 레이더 차트 모양
          ),
        ),
      ),
    );
  }
}

• RadarDataSet: 레이더 차트에서 데이터를 정의하는 클래스입니다. dataEntries는 각 축의 값이고, borderColor는 선의 색상, fillColor는 다각형 내부의 색상입니다.
• RadarEntry: 각 축의 값을 나타내며, 해당 축의 데이터 포인트를 의미합니다.
• getTitle: 각 축에 대한 제목을 설정하는 함수로, 해당 축이 무엇을 나타내는지 설명하는 데 사용됩니다.
• RadarShape.polygon: 다각형 형태로 레이더 차트를 그리며, 기본적으로 원형 대신 다각형으로 표현됩니다.

이 코드는 5개의 축을 가진 기본적인 레이더 차트를 생성하며, 각각의 축은 'Speed', 'Strength', 'Agility', 'Endurance', 'Intelligence'와 같은 제목을 가집니다.

 

 

반응형

 

3. 다중 데이터셋이 포함된 Radar Chart

때로는 여러 데이터셋을 하나의 레이더 차트에 표시하여 서로 비교하고 싶을 때가 있습니다. 여러 데이터셋을 사용하면 여러 항목을 동시에 비교할 수 있습니다.

3.1 다중 데이터셋을 사용하는 Radar Chart 구현

class MultiDatasetRadarChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multi-Dataset Radar Chart'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: RadarChart(
          RadarChartData(
            dataSets: [
              RadarDataSet(
                dataEntries: [
                  RadarEntry(value: 3),
                  RadarEntry(value: 2),
                  RadarEntry(value: 5),
                  RadarEntry(value: 4),
                  RadarEntry(value: 3),
                ],
                borderColor: Colors.blue,
                fillColor: Colors.blue.withOpacity(0.3),
                borderWidth: 2,
              ),
              RadarDataSet(
                dataEntries: [
                  RadarEntry(value: 5),
                  RadarEntry(value: 3),
                  RadarEntry(value: 4),
                  RadarEntry(value: 2),
                  RadarEntry(value: 5),
                ],
                borderColor: Colors.red,
                fillColor: Colors.red.withOpacity(0.3),
                borderWidth: 2,
              ),
            ],
            radarBackgroundColor: Colors.white,
            radarBorderData: BorderSide(color: Colors.black, width: 2),
            gridBorderData: BorderSide(color: Colors.grey),
            titlePositionPercentageOffset: 0.1,
            titleTextStyle: TextStyle(fontSize: 12, color: Colors.black),
            getTitle: (index) {
              switch (index) {
                case 0:
                  return 'Speed';
                case 1:
                  return 'Strength';
                case 2:
                  return 'Agility';
                case 3:
                  return 'Endurance';
                case 4:
                  return 'Intelligence';
                default:
                  return '';
              }
            },
            radarShape: RadarShape.polygon,
          ),
        ),
      ),
    );
  }
}

• 다중 RadarDataSet: 하나의 레이더 차트에 두 개 이상의 데이터셋을 추가할 수 있습니다. 각 데이터셋은 다른 색상과 스타일로 시각화되어 쉽게 비교할 수 있습니다.
• 각기 다른 값: 각 데이터셋은 각 축에 대해 서로 다른 값을 가질 수 있으며, 서로 겹쳐진 폴리곤을 통해 두 항목의 차이를 쉽게 확인할 수 있습니다.

위 예제에서는 두 개의 데이터셋이 추가되어, 두 개의 다른 폴리곤이 서로 비교됩니다. 블루 색상과 레드 색상이 사용되어, 데이터셋 간의 차이를 쉽게 파악할 수 있습니다.

 

 

728x90

 

4. 레이더 차트 커스터마이징

fl_chart는 레이더 차트의 다양한 속성을 커스터마이징할 수 있는 기능을 제공합니다. 색상, 선 두께, 데이터 포인트 스타일 등을 사용자 요구에 맞게 조정할 수 있습니다.

4.1 커스터마이징 예제

class CustomRadarChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Radar Chart'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: RadarChart(
          RadarChartData(
            dataSets: [
              RadarDataSet(
                dataEntries: [
                  RadarEntry(value: 4),
                  RadarEntry(value: 3),
                  RadarEntry(value: 5),
                  RadarEntry(value: 2),
                  RadarEntry(value: 4),
                ],
                borderColor: Colors.purple,
                fillColor: Colors.purple.withOpacity(0.4),
                borderWidth: 3,
                entryRadius: 4,  // 데이터 포인트의 크기
              ),
            ],
            radarBackgroundColor: Colors.grey[200]!,  // 배경색
            radarBorderData: BorderSide(color: Colors.black, width: 1),
            gridBorderData: BorderSide(color: Colors.grey, width: 1.5),  // 그리드 라인 두께
            tickCount: 5,  // 그리드의 레벨 개수
            titlePositionPercentageOffset: 0.2,  // 제목 위치를 더 바깥으로 설정
            titleTextStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold, color: Colors.black),
            getTitle: (index) {
              switch (index) {
                case 0:
                  return 'A';
                case 1:
                  return 'B';
                case 2:
                  return 'C';
                case 3:
                  return 'D';
                case 4:
                  return 'E';
                default:
                  return '';
          }
        },
        radarShape: RadarShape.circle,  // 레이더 차트를 원형으로 설정
      ),
    ),
  ),
);
} }

 

• entryRadius: 데이터 포인트의 크기를 설정합니다.
• radarBackgroundColor: 레이더 차트의 배경색을 설정합니다.
• gridBorderData: 그리드 선의 색상과 두께를 설정할 수 있습니다.
• tickCount: 레이더 차트에서 몇 단계로 구분할지 설정할 수 있습니다. 값이 클수록 더 많은 레벨의 그리드가 그려집니다.
• radarShape.circle: 레이더 차트를 원형으로 그리도록 설정합니다.

이 코드는 레이더 차트를 원형으로 표현하며, 배경색, 그리드 스타일, 데이터 포인트 크기 등을 커스터마이징한 예제입니다.

5. 레이더 차트의 활용 사례

레이더 차트는 여러 항목을 동시에 비교할 때 유용하며, 다양한 분야에서 활용될 수 있습니다:

• 스포츠 분석: 선수의 능력치(속도, 힘, 민첩성 등)를 비교하는 데 사용.
• 제품 비교: 제품의 다양한 특성(성능, 가격, 디자인 등)을 시각적으로 비교.
• 프로젝트 평가: 팀의 성과, 리소스 분배 등을 다각도로 평가.

결론

Flutter에서 Radar Chart를 사용하여 여러 변수 간의 관계를 직관적으로 시각화할 수 있습니다. fl_chart 라이브러리는 기본적인 레이더 차트뿐만 아니라 다중 데이터셋, 커스터마이징 기능을 통해 더욱 다양한 시각화를 지원합니다. 이번 글에서 설명한 예제를 바탕으로, Flutter 애플리케이션에서 다양한 데이터를 레이더 차트로 표현하여 더욱 풍부한 사용자 경험을 제공해보세요.