> For the complete documentation index, see [llms.txt](https://developer.aliothx.net/start/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.aliothx.net/start/option/index/chart.md).

# 차트

## Line Chart

<div align="left"><figure><img src="/files/c3fQSJpbp44yKI2DpSTJ" alt=""><figcaption></figcaption></figure> <figure><img src="/files/IeB2zu8GdSYfRaGYL41v" alt=""><figcaption></figcaption></figure></div>

* 데이터 포인트를 직선으로 연결하여 시간 또는 순서에 따른 데이터의 추이를 시각화 합니다.
* 주로 연속적인 데이터의 추이를 보여줄 때 사용됩니다.
* 효과적으로 시간 경과에 따른 데이터 변화를 확인할 수 있습니다.

```dart
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

<div align="left"><figure><img src="/files/Jn59hC6tbrlRG1EtYNJI" alt=""><figcaption></figcaption></figure> <figure><img src="/files/VsMLLsmqhp0VNq7r8j1D" alt=""><figcaption></figcaption></figure></div>

* 각 데이터 항목을 막대로 나타내어 비교하기 쉽게 만듭니다.
* 범주형 데이터 간의 관계를 시각적으로 보여 줍니다.
* 각 막대의 높이가 해당 범주의 수량을 나타냅니다.

```dart
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

<div align="left"><figure><img src="/files/cWR3AQYNCPzkwjhABdCP" alt=""><figcaption></figcaption></figure> <figure><img src="/files/LKmvM37c3TEXGTQmhfNB" alt=""><figcaption></figcaption></figure></div>

* 원형으로 나타낸 차트로, 전체 데이터의 상대적인 비율을 보여 줍니다.
* 각 섹션의 크기가 해당 카테고리의 비율을 나타냅니다.
* 주로 전체 데이터의 부분을 나타낼 때 사용됩니다.

```dart
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

<div align="left"><figure><img src="/files/do62sGKXwK08yMudgv3z" alt=""><figcaption></figcaption></figure> <figure><img src="/files/8dLLSdOW2a5HWZn6JCFw" alt=""><figcaption></figcaption></figure></div>

* 두 변수 간의 관계를 나타냅니다.
* 각 데이터 포인트가 산포되어 있어서 변수 간의 상관관계를 시각적으로 확인할 수 있습니다.
* 이상치나 군집 형태의 데이터를 시각적으로 식별하는 데 유용합니다.

```dart
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

<div align="left"><figure><img src="/files/wefIxudc5MIC0SxS9XjP" alt=""><figcaption></figcaption></figure> <figure><img src="/files/kczQ15QuvROjmnfZNcmi" alt=""><figcaption></figcaption></figure></div>

* 중심을 중심으로 여러 축을 갖는 다각형 형태로 데이터를 시각화합니다.
* 각 축은 특정 속성 또는 카테고리를 나타냅니다.
* 다양한 변수들 간의 상대적인 크기와 패턴을 비교하기 용이합니다.

```dart
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` 등이 있습니다. 선택한 라이브러리와 차트 종류에 따라 커스터마이징 옵션과 사용법이 다를 수 있습니다.