Flutter에서 Bubble Chart 사용법

Bubble Chart(버블 차트)는 데이터의 세 가지 차원을 시각화하는 데 유용한 차트 유형입니다. 일반적인 x축과 y축뿐만 아니라, 각 데이터 포인트의 크기(버블의 크기)를 통해 추가적인 정보를 시각적으로 나타낼 수 있습니다. Flutter에서 fl_chart 라이브러리를 활용하여 Bubble Chart를 구현할 수 있습니다. 이번 글에서는 fl_chart 라이브러리를 사용하여 Flutter에서 버블 차트를 구현하는 방법을 설명하겠습니다.

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

Flutter에서 차트를 구현하려면 fl_chart 라이브러리를 사용해야 합니다. 먼저 pubspec.yaml 파일에 fl_chart 패키지를 추가합니다.

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

그 다음, flutter pub get 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

2. Bubble Chart의 기본 개념

Bubble Chart는 각 데이터 포인트를 x, y 좌표로 배치하고, 그 포인트의 크기를 추가적인 정보로 표현합니다. fl_chart 라이브러리에서는 ScatterChart를 사용하여 버블 차트를 구현할 수 있습니다. 버블 크기를 표현하기 위해 각 데이터 포인트의 크기를 설정하고, 색상이나 스타일을 커스터마이징할 수 있습니다.

3. 기본적인 Bubble Chart 구현

Bubble Chart는 여러 데이터 포인트를 시각화할 수 있으며, 각 포인트의 크기를 다르게 설정하여 정보를 표시합니다.

3.1 기본 Bubble 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: BubbleChartExample(),
    );
  }
}

class BubbleChartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bubble Chart Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ScatterChart(
          ScatterChartData(
            scatterSpots: [
              ScatterSpot(2, 3, radius: 10, color: Colors.blue),
              ScatterSpot(4, 2, radius: 20, color: Colors.red),
              ScatterSpot(6, 5, radius: 15, color: Colors.green),
              ScatterSpot(8, 1, radius: 25, color: Colors.orange),
            ],
            scatterTouchData: ScatterTouchData(enabled: true),
            gridData: FlGridData(show: true),
            borderData: FlBorderData(show: true),
            titlesData: FlTitlesData(
              leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: true)),
              bottomTitles: AxisTitles(sideTitles: SideTitles(showTitles: true)),
            ),
            minX: 0,
            maxX: 10,
            minY: 0,
            maxY: 6,
          ),
        ),
      ),
    );
  }
}

• ScatterChart: Bubble Chart를 구현하기 위해 ScatterChart를 사용합니다.
• ScatterSpot: 각각의 버블을 정의하는 객체입니다. x와 y는 데이터 포인트의 좌표를 나타내고, radius는 버블의 크기를 나타냅니다. color는 버블의 색상을 지정합니다.
• minX, maxX, minY, maxY: 차트의 범위를 설정하는 속성입니다.
• **FlGridData**와 FlTitlesData: 차트에 그리드 라인과 축 타이틀을 표시하는 설정입니다.

이 예제에서는 x, y 축에 데이터를 배치하고, 각 데이터 포인트의 크기(버블의 크기)를 radius 값으로 설정하여 기본적인 버블 차트를 생성합니다.

 

 

반응형

 

4. Bubble Chart에 상호작용 추가

Flutter의 fl_chart는 Bubble Chart에 터치 상호작용을 추가할 수 있습니다. 이를 통해 사용자가 버블을 터치할 때 해당 데이터 포인트에 대한 추가 정보를 제공할 수 있습니다.

4.1 상호작용이 포함된 Bubble Chart 구현

class InteractiveBubbleChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Interactive Bubble Chart'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ScatterChart(
          ScatterChartData(
            scatterSpots: [
              ScatterSpot(2, 3, radius: 10, color: Colors.blue),
              ScatterSpot(4, 2, radius: 20, color: Colors.red),
              ScatterSpot(6, 5, radius: 15, color: Colors.green),
              ScatterSpot(8, 1, radius: 25, color: Colors.orange),
            ],
            scatterTouchData: ScatterTouchData(
              enabled: true,
              touchTooltipData: ScatterTouchTooltipData(
                tooltipBgColor: Colors.grey,
              ),
              touchCallback: (FlTouchEvent event, ScatterTouchResponse? response) {
                if (response != null && response.touchedSpot != null) {
                  final spot = response.touchedSpot!;
                  print('Touched spot: x = ${spot.x}, y = ${spot.y}, radius = ${spot.radius}');
                }
              },
            ),
            gridData: FlGridData(show: true),
            borderData: FlBorderData(show: true),
            titlesData: FlTitlesData(
              leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: true)),
              bottomTitles: AxisTitles(sideTitles: SideTitles(showTitles: true)),
            ),
            minX: 0,
            maxX: 10,
            minY: 0,
            maxY: 6,
          ),
        ),
      ),
    );
  }
}

• ScatterTouchData: 차트에 터치 상호작용을 추가할 수 있는 속성입니다.
• touchCallback: 사용자가 차트를 터치했을 때 호출되는 콜백 함수입니다. 터치된 버블의 좌표와 크기를 출력할 수 있습니다.
• ScatterTouchTooltipData: 터치된 데이터 포인트에 툴팁을 표시할 수 있습니다.

이 코드는 사용자가 차트의 버블을 터치할 때 해당 데이터 포인트의 x, y, 그리고 radius 값을 출력하는 상호작용 기능을 제공합니다.

 

 

728x90

 

5. Bubble Chart 커스터마이징

fl_chart를 사용하면 버블 차트를 다양하게 커스터마이징할 수 있습니다. 버블의 색상, 크기, 투명도, 경계선 등을 변경하여 더 직관적인 시각화를 만들 수 있습니다.

5.1 커스터마이징 예제

class CustomBubbleChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Bubble Chart'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ScatterChart(
          ScatterChartData(
            scatterSpots: [
              ScatterSpot(2, 3, radius: 15, color: Colors.blue.withOpacity(0.5)),
              ScatterSpot(4, 2, radius: 30, color: Colors.red.withOpacity(0.7)),
              ScatterSpot(6, 5, radius: 20, color: Colors.green.withOpacity(0.6)),
              ScatterSpot(8, 1, radius: 35, color: Colors.orange.withOpacity(0.8)),
            ],
            scatterTouchData: ScatterTouchData(enabled: true),
            gridData: FlGridData(show: true, drawVerticalLine: true, drawHorizontalLine: true),
            borderData: FlBorderData(show: true, border: Border.all(color: Colors.black, width: 2)),
            titlesData: FlTitlesData(
              leftTitles: AxisTitles(
                sideTitles: SideTitles(showTitles: true, reservedSize: 40),
              ),
              bottomTitles: AxisTitles(
                sideTitles: SideTitles(showTitles: true, reservedSize: 40),
              ),
            ),
            minX: 0,
            maxX: 10,
            minY: 0,
            maxY: 6,
          ),
        ),
      ),
    );
  }
}

• color.withOpacity: 각 버블의 색상에 투명도를 적용하여 시각적으로 더 부드럽고 구별되도록 표현합니다.
• gridData: 차트의 그리드 라인을 커스터마이징할 수 있습니다. 세로선과 가로선을 모두 표시하도록 설정했습니다.
• borderData: 차트의 경계선 스타일을 설정할 수 있습니다. 이 예제에서는 검정색 테두리와 굵기를 설정했습니다.

이 코드는 버블의 투

명도와 크기를 조정하여 시각적으로 더 부드럽고 직관적인 버블 차트를 구현한 예제입니다.

6. Bubble Chart의 활용 사례

Bubble Chart는 데이터의 세 가지 차원을 표현할 수 있어 여러 분야에서 유용하게 사용될 수 있습니다:

• 비즈니스 데이터 분석: 매출, 이익, 성장률 등 세 가지 변수를 시각화하여 각 데이터 포인트의 차이를 한눈에 파악.
• 건강 데이터 시각화: 심박수, 혈압, 체온 등 다양한 건강 지표를 한 차트에 시각화.
• 환경 데이터: 온도, 습도, 기압 등 환경 데이터를 동시에 표현.

결론

Flutter에서 Bubble Chart는 fl_chart 라이브러리를 사용하여 손쉽게 구현할 수 있습니다. 기본적인 차트부터 상호작용이 있는 차트, 커스터마이징된 차트까지 다양하게 시각화할 수 있습니다. 이를 통해 복잡한 데이터를 직관적으로 표현하고, 사용자에게 풍부한 데이터를 효과적으로 전달할 수 있습니다. 이번 글에서 설명한 예제를 바탕으로 Flutter 애플리케이션에서 Bubble Chart를 활용해보세요!