flutter 그래프 기간 선택

출처 flutter 공식 홈페이지

다음 이미지처럼 그래프 하단에 기간에 대한 조절을 하고 싶어 검색하는 중에 flutter 공식 문서를 발견했다. 내가 원하는 방향과 똑같아서 참고 자료로 썼다. 이런 부분에서는 자료가 많아서 좋은 것 같다.

아래 공식 문서 링크와 일부분 코드를 추가해놨다.

하지만 내가 추가로 원하는 부분은 하단 그래프에 스크롤바까지 있어 일부분만 보여주고 더 전의 데이터는 스크롤을 통해 볼 수 있게 하고 싶다.

그것도 해결되는 대로 글을 올리겠다.(언제 올릴 수 있을까...)

목표는 딱 11월 12일 1주일!

깃 주소에 업로드하고 있습니다.

https://help.syncfusion.com/flutter/range-selector/drag-mode

final double _min = 2.0;
final double _max = 10.0;
SfRangeValues _values = SfRangeValues(4.0, 6.0);

final List<Data> chartData = <Data>[
    Data(x:2.0, y: 2.2),
    Data(x:3.0, y: 3.4),
    Data(x:4.0, y: 2.8),
    Data(x:5.0, y: 1.6),
    Data(x:6.0, y: 2.3),
    Data(x:7.0, y: 2.5),
    Data(x:8.0, y: 2.9),
    Data(x:9.0, y: 3.8),
    Data(x:10.0, y: 3.7),
];

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
          body: Center(
              child: SfRangeSelector(
                    min: _min,
                    max: _max,
                    interval: 2,
                    showTicks: true,
                    showLabels: true,
                    initialValues: _values,
                    dragMode: SliderDragMode.both,
                    child: Container(
                    height: 130,
                    child: SfCartesianChart(
                        margin: const EdgeInsets.all(0),
                        primaryXAxis: NumericAxis(minimum: _min,
                            maximum: _max,
                            isVisible: false),
                        primaryYAxis: NumericAxis(isVisible: false),
                        plotAreaBorderWidth: 0,
                        series: <SplineAreaSeries<Data, double>>[
                            SplineAreaSeries<Data, double>(
                                color: Color.fromARGB(255, 126, 184, 253),
                                dataSource: chartData,
                                    xValueMapper: (Data sales, int index) => sales.x,
                                    yValueMapper: (Data sales, int index) => sales.y)
                            ],
                        ),
                   ),
              ),
          )
      )
  );
}

class Data {
  Data({required this.x, required this.y});
  final double x;
  final double y;
}