차트

플러터에서 사용가능한 다양한 차트 라이브러리를 샘플소스와 함께 제공합니다.

Line Chart

• 데이터 포인트를 직선으로 연결하여 시간 또는 순서에 따른 데이터의 추이를 시각화 합니다.

• 주로 연속적인 데이터의 추이를 보여줄 때 사용됩니다.

• 효과적으로 시간 경과에 따른 데이터 변화를 확인할 수 있습니다.

SfCartesianChart(
                  primaryXAxis: CategoryAxis(),
                  series: <ChartSeries<ChartData, String>>[
                    LineSeries<ChartData, String>(
                        dataSource: [
                          ChartData('Jan', 35),
                          ChartData('Feb', 28),
                          ChartData('Mar', 34),
                          ChartData('Apr', 32),
                          ChartData('May', 40)
                        ],
                        xValueMapper: (ChartData data, _) => data.x,
                        yValueMapper: (ChartData data, _) => data.y,
                        dataLabelSettings: DataLabelSettings(isVisible: true))
                  ])

Bar Chart

• 각 데이터 항목을 막대로 나타내어 비교하기 쉽게 만듭니다.

• 범주형 데이터 간의 관계를 시각적으로 보여 줍니다.

• 각 막대의 높이가 해당 범주의 수량을 나타냅니다.

SfCartesianChart(
                  primaryXAxis: CategoryAxis(),
                  series: <ChartSeries<ChartData, String>>[
                    BarSeries<ChartData, String>(
                        dataSource: [
                          ChartData('Jan', 35),
                          ChartData('Feb', 28),
                          ChartData('Mar', 34),
                          ChartData('Apr', 32),
                          ChartData('May', 40)
                        ],
                        xValueMapper: (ChartData data, _) => data.x,
                        yValueMapper: (ChartData data, _) => data.y,
                        dataLabelSettings: DataLabelSettings(isVisible: true))
                  ])

Pie Chart

• 원형으로 나타낸 차트로, 전체 데이터의 상대적인 비율을 보여 줍니다.

• 각 섹션의 크기가 해당 카테고리의 비율을 나타냅니다.

• 주로 전체 데이터의 부분을 나타낼 때 사용됩니다.

SfCircularChart(
      series: <CircularSeries>[
        PieSeries<Map<String, dynamic>, String>(
          dataSource: [
            {'category': 'A', 'value': 10},
            {'category': 'B', 'value': 15},
            {'category': 'C', 'value': 20},
            {'category': 'D', 'value': 25},
          ],
          xValueMapper: (datum, index) => datum['category'],
          yValueMapper: (datum, index) => datum['value'],
        ),
      ],
    )

Scatter Chart

• 두 변수 간의 관계를 나타냅니다.

• 각 데이터 포인트가 산포되어 있어서 변수 간의 상관관계를 시각적으로 확인할 수 있습니다.

• 이상치나 군집 형태의 데이터를 시각적으로 식별하는 데 유용합니다.

SfCartesianChart(
                series: <ChartSeries>[
                  ScatterSeries<Map<String, dynamic>, double>(
                    dataSource: [
                      {'x': 1.0, 'y': 10.0},
                      {'x': 2.0, 'y': 15.0},
                      {'x': 3.0, 'y': 20.0},
                      {'x': 4.0, 'y': 25.0},
                    ],
                    xValueMapper: (datum, index) => datum['x'],
                    yValueMapper: (datum, index) => datum['y'],
                  ),
                ],
              )

Radar Chart

• 중심을 중심으로 여러 축을 갖는 다각형 형태로 데이터를 시각화합니다.

• 각 축은 특정 속성 또는 카테고리를 나타냅니다.

• 다양한 변수들 간의 상대적인 크기와 패턴을 비교하기 용이합니다.

SfCircularChart(
              series: <CircularSeries>[
                RadialBarSeries<Map<String, dynamic>, String>(
                  dataSource: [
                    {'category': 'A', 'value': 10},
                    {'category': 'B', 'value': 15},
                    {'category': 'C', 'value': 20},
                    {'category': 'D', 'value': 25},
                  ],
                  xValueMapper: (datum, index) => datum['category'],
                  yValueMapper: (datum, index) => datum['value'],
                ),
              ],
            )

각 차트는 특정한 데이터 시각화 목적에 적합하며, Flutter에서는 다양한 라이브러리를 활용하여 이러한 차트를 쉽게 구현할 수 있습니다. 대표적인 라이브러리 중에는 fl_chart, syncfusion_flutter_charts 등이 있습니다. 선택한 라이브러리와 차트 종류에 따라 커스터마이징 옵션과 사용법이 다를 수 있습니다.