Flutter의 Bar Chart 사용법

데이터를 직관적으로 시각화하는 가장 효과적인 방법 중 하나는 Bar Chart(막대 차트)입니다. Bar Chart는 각 항목의 값을 막대의 길이로 표현해 데이터의 비교를 쉽게 할 수 있도록 도와줍니다. Flutter에서는 외부 라이브러리인 fl_chart를 사용하여 다양한 형태의 막대 차트를 구현할 수 있습니다. 이번 글에서는 fl_chart를 이용해 Flutter에서 막대 차트를 생성하는 방법을 단계별로 설명하겠습니다.

1. Bar 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. 기본 Bar Chart 구현

Bar Chart는 카테고리별로 값을 시각화할 때 유용한 차트입니다. fl_chart 라이브러리의 BarChart 위젯을 사용하여 기본적인 막대 차트를 구현할 수 있습니다.

2.1 기본적인 Bar 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: BarChartExample(),
    );
  }
}

class BarChartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bar Chart Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: BarChart(
          BarChartData(
            barGroups: [
              BarChartGroupData(x: 0, barRods: [BarChartRodData(y: 8, colors: [Colors.blue])]),
              BarChartGroupData(x: 1, barRods: [BarChartRodData(y: 10, colors: [Colors.red])]),
              BarChartGroupData(x: 2, barRods: [BarChartRodData(y: 14, colors: [Colors.green])]),
              BarChartGroupData(x: 3, barRods: [BarChartRodData(y: 15, colors: [Colors.purple])]),
              BarChartGroupData(x: 4, barRods: [BarChartRodData(y: 13, colors: [Colors.orange])]),
            ],
            titlesData: FlTitlesData(
              bottomTitles: AxisTitles(
                sideTitles: SideTitles(
                  showTitles: true,
                  getTitlesWidget: (value, meta) {
                    switch (value.toInt()) {
                      case 0:
                        return Text('Mon');
                      case 1:
                        return Text('Tue');
                      case 2:
                        return Text('Wed');
                      case 3:
                        return Text('Thu');
                      case 4:
                        return Text('Fri');
                      default:
                        return Text('');
                    }
                  },
                  reservedSize: 32,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

• BarChart: 막대 차트를 생성하는 위젯으로, 차트 데이터를 BarChartData로 설정합니다.
• BarChartGroupData: 각 그룹의 막대를 정의하는 클래스입니다. x는 막대의 위치를, barRods는 막대 데이터를 나타냅니다.
• BarChartRodData: 막대의 값을 나타내며, y는 막대의 길이(값), colors는 막대의 색상을 지정합니다.
• FlTitlesData: 차트의 축과 타이틀을 설정하는 곳입니다. 예제에서는 X축에 요일을 표시합니다.

이 코드는 각 요일별로 막대 차트를 표시하며, 각 막대는 고유한 색상과 값을 가집니다.

 

 

반응형

 

3. Bar Chart에 상호작용 추가

Flutter의 fl_chart 라이브러리는 Bar Chart에 터치와 같은 상호작용 기능을 추가할 수 있습니다. 이를 통해 사용자가 특정 막대를 터치할 때 더 많은 정보를 제공하거나, 막대를 강조할 수 있습니다.

3.1 터치 상호작용 추가

아래 예제에서는 차트에 터치 상호작용을 추가하여 사용자가 막대를 터치하면 그 값이 강조됩니다.

class InteractiveBarChart extends StatefulWidget {
  @override
  _InteractiveBarChartState createState() => _InteractiveBarChartState();
}

class _InteractiveBarChartState extends State<InteractiveBarChart> {
  int _touchedIndex = -1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Interactive Bar Chart'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: BarChart(
          BarChartData(
            barTouchData: BarTouchData(
              touchCallback: (event, response) {
                setState(() {
                  _touchedIndex = response?.spot?.touchedBarGroupIndex ?? -1;
                });
              },
              touchTooltipData: BarTouchTooltipData(
                tooltipBgColor: Colors.blueAccent,
              ),
            ),
            barGroups: List.generate(5, (i) {
              return BarChartGroupData(
                x: i,
                barRods: [
                  BarChartRodData(
                    y: (i + 1) * 2.0,
                    colors: [i == _touchedIndex ? Colors.red : Colors.blue],
                    width: 20,
                  ),
                ],
              );
            }),
            titlesData: FlTitlesData(
              bottomTitles: AxisTitles(
                sideTitles: SideTitles(
                  showTitles: true,
                  getTitlesWidget: (value, meta) {
                    switch (value.toInt()) {
                      case 0:
                        return Text('Mon');
                      case 1:
                        return Text('Tue');
                      case 2:
                        return Text('Wed');
                      case 3:
                        return Text('Thu');
                      case 4:
                        return Text('Fri');
                      default:
                        return Text('');
                    }
                  },
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

• BarTouchData: 차트에서 터치 이벤트를 처리하는 속성입니다.
• touchCallback: 사용자가 차트를 터치할 때 호출되는 콜백 함수로, 터치된 막대의 인덱스를 추적할 수 있습니다.
• BarTouchTooltipData: 터치 시 툴팁을 표시할 때 사용하는 속성입니다. 툴팁의 스타일과 색상을 설정할 수 있습니다.

이 코드는 사용자가 막대를 터치하면 해당 막대가 강조되어 다른 막대들과 구별됩니다.

 

728x90

 

 

4. 그룹화된 Bar Chart

때로는 여러 데이터를 동시에 비교하기 위해 그룹화된 Bar Chart가 필요할 수 있습니다. 예를 들어, 여러 제품의 매출을 월별로 비교할 때 각 제품의 매출 데이터를 그룹화하여 하나의 차트에 표시할 수 있습니다.

4.1 그룹화된 Bar Chart 구현

class GroupedBarChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Grouped Bar Chart'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: BarChart(
          BarChartData(
            barGroups: [
              BarChartGroupData(
                x: 0,
                barRods: [
                  BarChartRodData(y: 10, colors: [Colors.blue], width: 15),
                  BarChartRodData(y: 8, colors: [Colors.red], width: 15),
                ],
              ),
              BarChartGroupData(
                x: 1,
                barRods: [
                  BarChartRodData(y: 12, colors: [Colors.blue], width: 15),
                  BarChartRodData(y: 10, colors: [Colors.red], width: 15),
                ],
              ),
              BarChartGroupData(
                x: 2,
                barRods: [
                  BarChartRodData(y: 14, colors: [Colors.blue], width: 15),
                  BarChartRodData(y: 12, colors: [Colors.red], width: 15),
                ],
              ),
            ],
            titlesData: FlTitlesData(
              bottomTitles: AxisTitles(
                sideTitles: SideTitles(
                  showTitles: true,
                  getTitlesWidget: (value, meta) {
                    switch (value.toInt()) {
                      case 0:
                        return Text('Q1');
                      case 1:
                        return Text('Q2');
                      case 2:
                        return Text('Q3');
                      default:
                        return Text('');
                    }
                  },

            ),
          ),
        ),
      ),
    ),
  ),
);

} }

- **`BarChartGroupData`**: 그룹화된 데이터를 표현하며, 각 `x` 값에서 여러 개의 막대를 생성합니다.
- **`BarChartRodData`**: 각각의 막대를 정의하며, 같은 `x` 값에서 서로 다른 데이터를 시각화할 수 있습니다.

이 예제는 각 분기별로 두 개의 다른 값을 비교하는 그룹화된 막대 차트를 구현합니다.

#### 5. Bar Chart 커스터마이징

`fl_chart`는 막대 차트를 다양한 방식으로 커스터마이징할 수 있는 기능을 제공합니다. 막대의 두께, 색상, 애니메이션, 축 타이틀 등을 설정할 수 있습니다.

##### 5.1 커스터마이징 예제

```dart
class CustomBarChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Bar Chart'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: BarChart(
          BarChartData(
            barGroups: [
              BarChartGroupData(
                x: 0,
                barRods: [
                  BarChartRodData(
                    y: 8,
                    colors: [Colors.blue],
                    width: 25,
                    borderRadius: BorderRadius.circular(5), // 막대의 둥근 모서리 설정
                  ),
                ],
              ),
              BarChartGroupData(
                x: 1,
                barRods: [
                  BarChartRodData(
                    y: 10,
                    colors: [Colors.red],
                    width: 25,
                    borderRadius: BorderRadius.circular(5),
                  ),
                ],
              ),
            ],
            gridData: FlGridData(show: true),  // 그리드 표시
            borderData: FlBorderData(
              show: true,
              border: Border.all(color: Colors.black, width: 1),  // 차트 테두리 설정
            ),
          ),
        ),
      ),
    );
  }
}

• width: 막대의 두께를 설정합니다.
• borderRadius: 막대의 모서리를 둥글게 만들어 차트를 더욱 부드럽게 표현할 수 있습니다.
• FlGridData: 차트에 그리드를 추가하여 데이터를 쉽게 읽을 수 있도록 도와줍니다.

결론

Flutter에서 Bar Chart를 사용하여 데이터를 시각화하는 것은 fl_chart 라이브러리를 통해 매우 간단합니다. 기본적인 Bar Chart뿐만 아니라 상호작용 기능을 추가하거나, 그룹화된 Bar Chart를 통해 복잡한 데이터를 시각화할 수도 있습니다. 또한, 막대의 모양, 색상, 두께 등 다양한 속성을 커스터마이징할 수 있어 사용자의 요구에 맞는 차트를 쉽게 만들 수 있습니다. 이번 글에서 설명한 내용을 바탕으로 Flutter 애플리케이션에서 효과적으로 데이터를 시각화해보세요.