# **Chart**

## 1. 공통

### 1.1. 공통 속성

- 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
- 범례 - 차트의 범례를 표시.
- 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.
- 2축 - Y축을 좌우 2축으로 표현 여부, 2축 선택 시 Y보조축 및 Y보조축 옵션이 표현된다.

### 1.2. X축

- 데이터 참조 - 차트가 표현할 데이터의 필드명. X축에 표현될 데이터의 필드명을 입력한다. 아래와 같은 데이터를 표시할 시 'Date'가 된다.  
  ![Chart-bar-테마][chart-bar-01]
- 제목 - X축에 원하는 제목(라벨) 입력
- 그리드 라인 - 세로방향의 눈금선 표현 여부
  ![X축 그리드][chart-bar-08]
- 눈금 표시 - X축 눈금 표시 여부

### 1.3. Y축

- 제목 - Y축에 원하는 제목(라벨) 입력
- 최소값 자동 - 최소값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
- 최소값 - 최소값 자동 해제 시 표시가 되며 눈금 최소값을 설정할 수 있다.
- 최대값 자동 - 최대값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
- 최대값 - 최대값 자동 해제 시 표시가 되며 눈금 최대값을 설정할 수 있다.
- 스텝 - 눈금 간격 설정
- 그리드 라인 - 가로방향의 눈금선 표현 여부
  ![Y축 그리드][chart-bar-12]
- 눈금 표시 - Y축 눈금 표시 여부

---

## 2. Mix Chart(수직 막대/라인 차트)

- 데이터를 막대모양과 라인모양의 형태를 섞어서 표현해주는 차트. **(믹스차트의 속성은 막대차트와 라인차트와 동일합니다.)**
- 데이터를 막대모양 또는 라인모양의 형태로 표현하거나 막대와 라인을 믹스해서 표현 가능. 여러개의 시리즈(필드)가 있을시엔 병렬막대 또는 누적막대로 표현이 가능
  ![chart-mix-차트 타입][chart-mix-02]

  [chart-mix-02]: ../images/chart-mix-02.png

### 2.1. 시리즈

- 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
- **공통**
  - 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의,
    아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'과 'Bad'가 된다.  
    ![Data Refer][chart-bar-01]
  - 유형 - 해당 시리즈를 라인(line)차트로 표현할지 아니면 바차(bar)트로 표현할지
  - 라벨 - 범례명
  - 색상 - 차트에 표현될 시리즈의 색상 지정
  - 누적 그룹 - 동일한 누적 그룹에 포함되어 있는 시리즈들의 값을 누적하여 그라프에 표현한다.
    ![누적 그룹][chart-bar-02]
  - 대상 축 - 2축 적용 시 대상축에 대한 설정 필드가 나타나는데, 대상축은 해당 시리즈의 정보가 참조하는 축(축의 눈금)을 가르킨다.
    ![대상 축][chart-bar-03]
  - 값형식 - 값 표시가 될 때 값의 숫자형식을 지정할 수 있다.
  - 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
  - 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 )
  - 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다.
    값표시가 선택되면 아래와 같은 항목이 나타난다.
    - 폰트 색상 - 시리즈 라벨의 색상 설정
    - 크기 - 시리즈 라벨 폰트 크기 설정
    - 위치 - 시리즈 라벨 폰트위치 설정
    - 오프셋 - 시리즈 라벨의 상대위치(위치에 대한 상대위치를 의미함)
    - 회전 - 시리즈 라벡의 회전 각도
- **유형이 line인 경우**
  - 긴장도 - 직선을 사용한 그래프(angled), 부드러운 선을 사용한 그래프(smooth)
  - 경계부분 넓이 - 라인의 굵기 설정
  - 포인트 모양 - 라인의 각 꼭지점의 포인트 모양
  - 포인트 크기 - 라인의 각 꼭지점의 크기
  - 채우기 - 라인이 그려진 공간을 공통 속정의 색상을 이용하여 데이터를 표시하는 도형을 채운다.

### 2.2. X축

- 일반 - [공통 속성](#1.2.-X축)에서 정의한 내용과 같음
- 막대 간격 - 막대와 막대 사이의 간격이며 막대의 크기에 영향 준다.
- 눈금 간격 - 눈금 사이의 간격이며 막대의 크기에 영향 준다.

### 2.3. Y축

- [공통 속성](#1.3.-Y축)에서 정의한 내용과 같음

### 2.4. Y보조축(2축 선택 시 표현 됨)

- 설정 속성은 Y축 설정 방법과 같다.

[chart-bar-01]: ../images/chart-bar-01.png
[chart-bar-02]: ../images/chart-bar-02.png
[chart-bar-03]: ../images/chart-bar-03.png
[chart-bar-08]: ../images/chart-bar-08.png
[chart-bar-12]: ../images/chart-bar-12.png

---

## 3. 수평 막대 차트

데이터를 가로 막대모양의 형태로 표현해주는 차트. 여러개의 필드가 있을시엔 병렬막대 또는 누적막대로 표현이 가능

### 3.1. 공통 속성

- 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
- 범례 - 차트의 범례를 표시.
- 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.
- 2축 - Y축을 좌우 2축으로 표현 여부, 2축 선택 시 Y보조축 및 Y보조축 옵션이 표현된다.

### 3.2. 시리즈

- 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
- **공통**
  - 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'과 'Bad'가 된다
  - 라벨 - 범례명
  - 색상 - 차트에 표현될 시리즈의 색상 지정
  - 누적 그룹 - 동일한 누적 그룹에 포함되어 있는 시리즈들의 값을 누적하여 그라프에 표현한다.
  - 대상 축 - 2축 적용 시 대상축에 대한 설정 필드가 나타나는데, 대상축은 해당 시리즈의 정보가 참조하는 축(축의 눈금)을 가르킨다.
  - 값형식 - 값 표시가 될 때 값의 숫자형식을 지정할 수 있다.
  - 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
  - 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 )
  - 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다.
    값표시가 선택되면 아래와 같은 항목이 나타난다.
    - 폰트 색상 - 시리즈 라벨의 색상 설정
    - 크기 - 시리즈 라벨 폰트 크기 설정
    - 위치 - 시리즈 라벨 폰트위치 설정
    - 오프셋 - 시리즈 라벨의 상대위치(위치에 대한 상대위치를 의미함)
    - 회전 - 시리즈 라벡의 회전 각도

### 3.3. X축

- 데이터 참조 - 차트가 표현할 데이터의 필드명. X축에 표현될 데이터의 필드명을 입력한다. 아래와 같은 데이터를 표시할 시 'Date'가 된다.
- 제목 - X축에 원하는 제목(라벨) 입력
- 그리드 라인 - 세로방향의 눈금선 표현 여부
- 눈금 표시 - X축 눈금 표시 여부

### 3.4. Y축

- 제목 - Y축에 원하는 제목(라벨) 입력
- 최소값 자동 - 최소값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
- 최소값 - 최소값 자동 해제 시 표시가 되며 눈금 최소값을 설정할 수 있다.
- 최대값 자동 - 최대값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
- 최대값 - 최대값 자동 해제 시 표시가 되며 눈금 최대값을 설정할 수 있다.
- 스텝 - 눈금 간격 설정
- 그리드 라인 - 가로방향의 눈금선 표현 여부
- 눈금 표시 - Y축 눈금 표시 여부

[chart-horizontal-bar-01]: ../images/chart-horizontal-bar-01.png

---

## 4. 라인 차트

데이터를 라인모양의 형태로 표현해주는 차트. (중복되는 속성은 막대차트를 참조)

### 4.1. 속성

- 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
- 범례 - 차트의 범례를 표시.
- 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.
- 2축 - Y축을 좌우 2축으로 표현 여부, 2축 선택 시 Y보조축 및 Y보조축 옵션이 표현된다.

### 4.2. 시리즈

- 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
- **공통**
  - 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'과 'Bad'가 된다.  
    ![Data Refer][chart-line-01]
  - 긴장도 - 직선을 사용한 그래프(angled), 부드러운 선을 사용한 그래프(smooth)
  - 경계부분 넓이 - 라인의 굵기 설정
  - 라벨 - 범례명
  - 색상 - 차트에 표현될 시리즈의 색상 지정
  - 포인트 모양 - 라인의 각 꼭지점의 포인트 모양
  - 포인트 크기 - 라인의 각 꼭지점의 크기
  - 누적 그룹 - 동일한 누적 그룹에 포함되어 있는 시리즈들의 값을 누적하여 그라프에 표현한다.
  - 채우기 - 라인이 그려진 공간을 공통 속정의 색상을 이용하여 데이터를 표시하는 도형을 채운다.
  - 대상 축 - 2축 적용 시 대상축에 대한 설정 필드가 나타나는데, 대상축은 해당 시리즈의 정보가 참조하는 축(축의 눈금)을 가르킨다.
  - 값형식 - 값 표시가 될 때 값의 숫자형식을 지정할 수 있다.
  - 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
  - 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 )
  - 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다.
    값표시가 선택되면 아래와 같은 항목이 나타난다.
    - 폰트 색상 - 시리즈 라벨의 색상 설정
    - 크기 - 시리즈 라벨 폰트 크기 설정
    - 위치 - 시리즈 라벨 폰트위치 설정
    - 오프셋 - 시리즈 라벨의 상대위치(위치에 대한 상대위치를 의미함)
    - 회전 - 시리즈 라벡의 회전 각도

### 4.3. X축

- 데이터 참조 - 차트가 표현할 데이터의 필드명. X축에 표현될 데이터의 필드명을 입력한다. 아래와 같은 데이터를 표시할 시 'Date'가 된다.
- 제목 - X축에 원하는 제목(라벨) 입력
- 그리드 라인 - 세로방향의 눈금선 표현 여부
- 눈금 표시 - X축 눈금 표시 여부

### 4.4. Y축

- 제목 - Y축에 원하는 제목(라벨) 입력
- 최소값 자동 - 최소값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
- 최소값 - 최소값 자동 해제 시 표시가 되며 눈금 최소값을 설정할 수 있다.
- 최대값 자동 - 최대값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
- 최대값 - 최대값 자동 해제 시 표시가 되며 눈금 최대값을 설정할 수 있다.
- 스텝 - 눈금 간격 설정
- 그리드 라인 - 가로방향의 눈금선 표현 여부
- 눈금 표시 - Y축 눈금 표시 여부

[chart-line-01]: ../images/chart-line-01.png

---

## 5. 레이더 차트

데이터를 레이더 모양으로 표현해주는 차트. 원형 차트의 데이터를 여러개의 라인 형태로 표현

### 5.1. 공통 속성

- 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
- 범례 - 차트의 범례를 표시.
- 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.

### 5.2. 시리즈

- 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
- **공통**
  - 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'과 'Bad'가 된다.  
    ![Data Refer][chart-radar-01]
  - 라벨 - 범례명
  - 색상 - 차트에 표현될 시리즈의 색상 지정
  - 누적 그룹 - 동일한 누적 그룹에 포함되어 있는 시리즈들의 값을 누적하여 그라프에 표현한다.
  - 값형식 - 값 표시가 될 때 값의 숫자형식을 지정할 수 있다.
  - 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
  - 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 )
  - 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다.
    값표시가 선택되면 아래와 같은 항목이 나타난다.
    - 폰트 색상 - 시리즈 라벨의 색상 설정
    - 크기 - 시리즈 라벨 폰트 크기 설정
    - 위치 - 시리즈 라벨 폰트위치 설정
    - 오프셋 - 시리즈 라벨의 상대위치(위치에 대한 상대위치를 의미함)
    - 회전 - 시리즈 라벡의 회전 각도

### 5.3. 축

- 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 참조할 데이터는 line이 된다.
  ![Data Refer][chart-radar-01]

[chart-radar-01]: ../images/chart-radar-01.png

---

## 6. 폴라 차트

데이터를 극좌표 모양으로 표현해주는 차트.

### 6.1. 공통 속성

- 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
- 범례 - 차트의 범례를 표시.
- 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.

### 6.2. 시리즈

- 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
- **공통**
  - 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'가 된다.  
    ![Data Refer][chart-polar-01]
  - 라벨 - 범례명
  - 색상 - 차트에 표현될 시리즈의 색상 지정
  - 값형식 - 값 표시가 될 때 값의 숫자형식을 지정할 수 있다.
  - 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
  - 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 )
  - 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다.
    값표시가 선택되면 아래와 같은 항목이 나타난다.
    - 폰트 색상 - 시리즈 라벨의 색상 설정
    - 크기 - 시리즈 라벨 폰트 크기 설정
    - 위치 - 시리즈 라벨 폰트위치 설정
    - 오프셋 - 시리즈 라벨의 상대위치(위치에 대한 상대위치를 의미함)
    - 회전 - 시리즈 라벡의 회전 각도

### 6.3. 축

- 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 참조할 데이터는 hobby가 된다.
  ![Data Refer][chart-polar-01]

[chart-polar-01]: ../images/chart-polar-01.png

---

## 7. 파이 차트

데이터를 원형 모양으로 표현해주는 차트.

### 7.1. 공통 속성

- 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
- 범례 - 차트의 범례를 표시.
- 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.

### 7.2. 시리즈

- 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
- **공통**
  - 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'가 된다.  
    ![Data Refer][chart-pie-01]
  - 라벨 - 범례명
  - 색상 - 차트에 표현될 시리즈의 색상 지정
  - 값형식 - 값 표시가 될 때 값의 숫자형식을 지정할 수 있다.
  - 값형식 - 값 표시가 될 때 값의 숫자형식을 지정할 수 있다.
  - 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
  - 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 )
  - 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다.
    값표시가 선택되면 아래와 같은 항목이 나타난다.
    - 폰트 색상 - 시리즈 라벨의 색상 설정
    - 크기 - 시리즈 라벨 폰트 크기 설정
    - 위치 - 시리즈 라벨 폰트위치 설정
    - 오프셋 - 시리즈 라벨의 상대위치(위치에 대한 상대위치를 의미함)
    - 회전 - 시리즈 라벡의 회전 각도

### 7.3. 축

- 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 참조할 데이터는 line이 된다.
  ![Data Refer][chart-pie-01]

[chart-pie-01]: ../images/chart-pie-01.png

---

## 8. 도넛 차트

![컴포넌트-Chart-doughnut][chart-doughnut-01]

데이터를 도넛 모양으로 표현해주는 차트.

### 8.1. 공통 속성

- 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
- 범례 - 차트의 범례를 표시.
- 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.

### 8.2. 시리즈

- 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
- **공통**
  - 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'가 된다.  
    ![Data Refer][chart-doughnut-01]
  - 라벨 - 범례명
  - 색상 - 차트에 표현될 시리즈의 색상 지정
  - 값형식 - 값 표시가 될 때 값의 숫자형식을 지정할 수 있다.
  - 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
  - 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 )
  - 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다.
    값표시가 선택되면 아래와 같은 항목이 나타난다.
    - 폰트 색상 - 시리즈 라벨의 색상 설정
    - 크기 - 시리즈 라벨 폰트 크기 설정
    - 위치 - 시리즈 라벨 폰트위치 설정
    - 오프셋 - 시리즈 라벨의 상대위치(위치에 대한 상대위치를 의미함)
    - 회전 - 시리즈 라벡의 회전 각도

### 8.3. 축

- 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 참조할 데이터는 line이 된다.
  ![Data Refer][chart-doughnut-01]

[chart-doughnut-01]: ../images/chart-doughnut-01.png