# 차트

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.aliothx.net/start/option/index/chart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.