Flutter의 Line Chart 사용법

Line Chart(라인 차트)는 시간이나 순서에 따라 데이터를 시각화하는 데 가장 많이 사용되는 차트 유형 중 하나입니다. 라인 차트는 데이터의 변화를 선으로 연결해 보여주며, 주로 주가, 트래픽 데이터, 온도 변화 등 연속적인 변화를 시각적으로 쉽게 파악할 수 있게 도와줍니다. Flutter에서는 fl_chart 라이브러리를 사용해 손쉽게 라인 차트를 구현할 수 있습니다. 이번 글에서는 fl_chart를 사용하여 Flutter 애플리케이션에서 라인 차트를 구현하는 방법을 설명하겠습니다.

1. Line 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. 기본적인 Line Chart 구현

라인 차트는 시간 흐름에 따라 데이터를 선으로 연결하는 방식입니다. 이 섹션에서는 가장 기본적인 라인 차트를 구현하는 방법을 보여드리겠습니다.

2.1 기본 Line 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: LineChartExample(),
    );
  }
}

class LineChartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Line Chart Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: LineChart(
          LineChartData(
            lineBarsData: [
              LineChartBarData(
                spots: [
                  FlSpot(0, 1),  // x, y 좌표
                  FlSpot(1, 1.5),
                  FlSpot(2, 1.4),
                  FlSpot(3, 3.4),
                  FlSpot(4, 2),
                  FlSpot(5, 2.2),
                  FlSpot(6, 1.8),
                ],
                isCurved: true,  // 선을 곡선으로 표현
                colors: [Colors.blue],  // 선의 색상
                barWidth: 4,  // 선의 굵기
                isStrokeCapRound: true,  // 선 끝을 둥글게 설정
                dotData: FlDotData(show: false),  // 데이터 포인트의 점 표시
                belowBarData: BarAreaData(show: false),  // 선 아래 영역의 색상
              ),
            ],
            titlesData: FlTitlesData(
              bottomTitles: AxisTitles(
                sideTitles: SideTitles(showTitles: true, reservedSize: 22),
              ),
              leftTitles: AxisTitles(
                sideTitles: SideTitles(showTitles: true, reservedSize: 28),
              ),
            ),
            borderData: FlBorderData(show: true),  // 차트의 경계선
            gridData: FlGridData(show: true),  // 그리드 표시 여부
          ),
        ),
      ),
    );
  }
}

• FlSpot(x, y): 차트에서 데이터 포인트를 지정하는 좌표입니다. x는 시간 또는 순서를, y는 해당 시점의 값을 나타냅니다.
• isCurved: 라인을 곡선으로 처리하여 데이터를 부드럽게 연결할 수 있습니다.
• barWidth: 라인의 굵기를 설정합니다.
• FlDotData: 데이터 포인트의 점을 표시할지 여부를 설정합니다. 이 예제에서는 점을 숨깁니다.
• BarAreaData: 선 아래에 음영 처리된 영역을 표시할지 여부를 설정합니다.

이 코드에서는 간단한 라인 차트를 생성하며, 데이터 포인트를 곡선으로 연결하여 부드러운 선을 보여줍니다.

 

반응형

 

3. 라인 차트 커스터마이징

fl_chart 라이브러리를 사용하면 라인 차트를 다양한 방식으로 커스터마이징할 수 있습니다. 차트의 색상, 선 두께, 포인트 스타일 등을 수정하여 원하는 형태로 시각화할 수 있습니다.

3.1 선 아래 영역에 색상 추가

라인 차트에서 선 아래 영역에 색상을 추가하면 데이터 변화의 강도를 시각적으로 더 강조할 수 있습니다.

class LineChartWithArea extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Line Chart with Area'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: LineChart(
          LineChartData(
            lineBarsData: [
              LineChartBarData(
                spots: [
                  FlSpot(0, 1),
                  FlSpot(1, 1.5),
                  FlSpot(2, 1.4),
                  FlSpot(3, 3.4),
                  FlSpot(4, 2),
                  FlSpot(5, 2.2),
                  FlSpot(6, 1.8),
                ],
                isCurved: true,
                colors: [Colors.blue],
                barWidth: 4,
                isStrokeCapRound: true,
                dotData: FlDotData(show: false),
                belowBarData: BarAreaData(
                  show: true,
                  colors: [
                    Colors.blue.withOpacity(0.3),
                    Colors.blue.withOpacity(0.0),
                  ],
                  gradientFrom: Offset(0, 0),
                  gradientTo: Offset(0, 1),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

• BarAreaData: 선 아래 영역에 색상을 추가하는 옵션입니다. colors 속성으로 그라데이션 색상을 지정할 수 있습니다.
• **gradientFrom**과 gradientTo: 그라데이션 방향을 설정합니다.

이 코드는 라인 아래에 투명도 있는 블루 색상을 그라데이션으로 적용하여, 차트의 데이터를 강조합니다.

4. 라인 차트에 상호작용 추가

Flutter에서 차트에 터치 상호작용을 추가하여 데이터를 더욱 직관적으로 보여줄 수 있습니다. 사용자가 차트를 터치할 때 해당 좌표의 값을 표시하는 상호작용을 추가할 수 있습니다.

4.1 터치 상호작용 추가

class InteractiveLineChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Interactive Line Chart'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: LineChart(
          LineChartData(
            lineBarsData: [
              LineChartBarData(
                spots: [
                  FlSpot(0, 1),
                  FlSpot(1, 1.5),
                  FlSpot(2, 1.4),
                  FlSpot(3, 3.4),
                  FlSpot(4, 2),
                  FlSpot(5, 2.2),
                  FlSpot(6, 1.8),
                ],
                isCurved: true,
                colors: [Colors.green],
                barWidth: 4,
                isStrokeCapRound: true,
                belowBarData: BarAreaData(show: true, colors: [Colors.green.withOpacity(0.2)]),
              ),
            ],
            lineTouchData: LineTouchData(
              touchTooltipData: LineTouchTooltipData(
                tooltipBgColor: Colors.blueAccent,
              ),
              touchCallback: (FlTouchEvent event, LineTouchResponse? response) {
                if (!event.isInterestedForInteractions || response == null || response.lineBarSpots == null) {
                  return;
                }
                final touchedSpot = response.lineBarSpots!.first;
                print('Touched spot: x = ${touchedSpot.x}, y = ${touchedSpot.y}');
              },
              handleBuiltInTouches: true,
            ),
          ),
        ),
      ),
    );
  }
}

• LineTouchData: 차트의 터치 상호작용을 관리하는 속성입니다.
• touchCallback: 사용자가 차트를 터치할 때 호출되는 콜백 함수입니다. 터치된 좌표의 값을 확인할 수 있습니다.
• LineTouchTooltipData: 터치된 위치에서 툴팁을 보여주는 기능을 설정할 수 있습니다.

이 코드는 사용자가 차트의 특정 부분을 터치했을 때 해당 좌표의 값을 출력하는 상호작용 기능을 제공합니다. 또한, 툴팁을 사용해 터치된 지점에 대한 추가 정보를 보여줄 수도 있습니다.

 

 

728x90

 

5. 다중 선(Line) 차트 구현

하나의 라인 차트에서 여러 데이터를 비교하고 싶을 때, 여러 개의 선을 추가할 수 있습니다. 예를 들어, 두 개의 데이터 세트를 같은 차트에 표시하여 서로 비교할 수 있습니다.

5.1 다중 선 차트 구현

class MultiLineChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multi-Line Chart'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: LineChart(
          LineChartData(
            lineBarsData: [
              LineChartBarData(
                spots: [
                  FlSpot(0, 1),
                  FlSpot(1, 1.5),
                  FlSpot(2, 1.4),
                  FlSpot(3, 3.4),
                  FlSpot(4, 2),
                  FlSpot(5, 2.2),
                  FlSpot(6, 1.8),
                ],
                isCurved: true,
                colors: [Colors.blue],
                barWidth: 4,
                isStrokeCapRound: true,
                belowBarData: BarAreaData(show: false),
              ),
              LineChartBarData(
                spots: [
                  FlSpot(0, 1.2),
                  FlSpot(1, 1.8),
                  FlSpot(2, 1.6),
                  FlSpot(3, 3.2),
                  FlSpot(4, 2.5),
                  FlSpot(5, 2.4),
                  FlSpot(6, 2.1),
                ],
                isCurved: true,
                colors: [Colors.red],
                barWidth: 4,
                isStrokeCapRound: true,
                belowBarData: BarAreaData(show: false),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

• lineBarsData: 차트에서 여러 선을 표시하려면 이 속성에 LineChartBarData 객체를 여러 개 추가합니다.
• 다른 색상의 선: 각 선의 색상과 스타일을 설정하여 데이터를 쉽게 구별할 수 있습니다.

이 예제에서는 두 개의 데이터를 하나의 차트에 시각화하여 서로 비교할 수 있도록 구현되었습니다.

결론

Flutter에서 Line Chart를 사용하여 데이터를 시각화하는 것은 fl_chart 라이브러리를 통해 매우 간단하고 직관적으로 구현할 수 있습니다. 기본적인 라인 차트부터 시작해 곡선 처리, 터치 상호작용, 다중 선 차트 등 다양한 기능을 활용하여 데이터를 효과적으로 시각화할 수 있습니다. 이번 글에서 설명한 차트 예제를 바탕으로 Flutter 애플리케이션에서 다양한 데이터 시각화를 구현해보세요.