[Toy] 혈압 기록 노트(4) - 차트연동

차트연동을 위해 외부 라이브러리를 사용하였다. 사실 차트 라이브러리는 꽤나 많기 때문에 어느게 더 좋다 라고 

할 수는 없고, 나는 단순히 구글검색에서 가장 위에 있는 라이브러리를 연동하였다.  모든 차트를 다 적용하지는 않고, 

line 차트와 분포 차트 두개만 사용하였다.  차트 적용방법은 정말 다양한데, 내가 사용한 방법에 대해서만 설명하고자 한다. 

 

https://pub.dev/packages/syncfusion_flutter_charts

syncfusion_flutter_charts | Flutter Package

 

1. 연동 방법

     - 터미널에서 다음의 명령을 친다.  기본적으로 pubspec.yaml 에도 적용이 된다.

flutter pub add syncfusion_flutter_charts

     - 만일 적용이 안될 경우, dependencies 에 다음을 추가한다. 버전 차이는 있을 수 있다. 

syncfusion_flutter_charts: ^21.2.5

    - 사용할 클래스에 import 하여 사용한다. 

import 'package:syncfusion_flutter_charts/charts.dart';

import 'package:syncfusion_flutter_charts/sparkcharts.dart';

 

     * 나같은 경우 실행시 바로 오류가 발생하였었다. render_tree.dart 에서 오류가 발생하였고, 생성자에서 const를 삭제하니

        해결되었다

 

2. 차트 적용 - widget 설정

....

 Padding(
      padding: const EdgeInsets.all(20.0),
      child: SfCartesianChart(
        title: ChartTitle(text: chartName),
        legend: Legend(isVisible: true),
        primaryXAxis: CategoryAxis(
            majorGridLines: const MajorGridLines(width: 0), labelRotation: -45),
        primaryYAxis: NumericAxis(
            axisLine: const AxisLine(width: 0),
            labelFormat: r'{value}',
            majorTickLines: const MajorTickLines(size: 0)),
        tooltipBehavior: TooltipBehavior(enable: true),
        series: seriesItem,
      ),
    );
    
    
.....

             - SfCartesianChart 는 수많은 차트 위젯중 하나 이다.  이 위젯을 사용하고, series 의 설정을 달리 하면 차트 종류가 변경된다

                (series 는 하단에 다시 설명)

             - 위의 항목이 기본 설정이기 때문에 그대로 복붙 해도 상관없다. 단, series는 변경해주어야 한다. 

             - labelFormat 의 경우에도 그대로 사용해도 된다. 

             - tooltipBehavior : 마우스 오버 혹은 터치시 해당 위치에 있는 데이터의 전체 정보를 표시해 준다 (x축, y축 값 및 name)

             - 위 위젯의 장점이, 차트 종류별로 위젯을 개별 코딩하지 않고, 이것 하나로 series만 변경해주면 다양한 차트를 사용할 수 있다.

 

3. 차트 적용 - series

     - 차트 위젯에 맞는 series를 사용해야 한다. 부모격인 series가 있고, 해당 부모 series를 상속받는 자식 series를 통해

        차트의 종류를 정할 수 있다. 

 

class ChartFormState extends State<ChartForm> {
  List<CartesianSeries> _getLineSeries(List<PressureClass> items) {
    return <CartesianSeries>[
      LineSeries<PressureClass, String>(
          dataSource: items,
          xValueMapper: (PressureClass pressure, _) => pressure.time,
          yValueMapper: (PressureClass pressure, _) => pressure.high,
          name: "수축기",
          markerSettings: const MarkerSettings(isVisible: true)),
      LineSeries<PressureClass, String>(
          dataSource: items,
          xValueMapper: (PressureClass pressure, _) => pressure.time,
          yValueMapper: (PressureClass pressure, _) => pressure.low,
          name: "이완기",
          markerSettings: const MarkerSettings(isVisible: true))
    ];
  }

  List<CartesianSeries> _getScatterSeries(List<PressureClass> items) {
    List<PressureClass> chartItems = List.from(items);
    chartItems.sort((a, b) => a.high.compareTo(b.high));

    return <CartesianSeries>[
      ScatterSeries<PressureClass, String>(
          dataSource: chartItems,
          xValueMapper: (PressureClass pressure, _) => pressure.high.toString(),
          yValueMapper: (PressureClass pressure, _) => pressure.low,
          name: "수축/이완기",
          markerSettings: const MarkerSettings(isVisible: true)),
    ];
  }

         - 최종 리턴형식은 List<CartesianSeries> 가 된다. 
            -> sfChrtesianChart 위젯을 사용하기에, 해당 차트에서 요구하는 Series 클래스를 써야 한다. 

         - 해당 리턴형식 내부에 각 차트에 맞는 series (LineSeries, ScatterSeries) 를 생성하여 넣어주면 해당 차트를 그려준다. 

         - 해당 series들은 <차트에 그릴 데이터 클래스, String> 으로 설정된다. 뒤의 String은 그냥 고정인듯 싶다.

         - dataSource 가 차트에 그릴 데이터이다. 

         - xValueMapper, yValueMapper 를 통해 x축 y축에 표시할 데이터를 설정 한다. 

         - name 을 통해 legend 에 표기될 이름을 설정한다. 

         - markerSettings 를 통해 마커를 보여줄지 말지 설정한다 (원형 형태. 마우스 오버 등 시 정보를 표시한다)