# 게이지(Gauge)

## Content

`계기 도표`는 속도계 또는 다이얼 도표라고도 하며 주로 대상이나 목표에 상대적으로 지정된 범위 내의 단일한 데이터 지점을 시각화하는 데 적합합니다. 이러한 도표는 진행 상황이나 성과를 시각적으로 흥미를 유도하는 방식으로 알리고자 하는 경우 특히 유용합니다.
예를 들어 [계기 도표 데모](/activereportsjs/demos/Reports/GaugePlot/purejs)의 도표는 제품 또는 서비스의 네 가지 측면에서 고객 만족도를 시각적으로 표현합니다. `제품 품질`, `배송 속도`, `사용 편의`, `가격`입니다. 이 도표는 색상이 표시된 스케일을 사용하며 만족도 점수는 `1(매우 불만족)`부터 `100(매우 만족)`까지입니다.

![image.d5c985](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/5782ed59-7caa-432e-b8fb-3d0b076233da/image.d5c985.079da8.png)

### 차트 마법사

보고서에 [차트를 추가](/activereportsjs/docs/v6.1/#adding-a-chart)하고 `차트 마법사`의 첫 화면에서 도표 유형을 `계기`로 설정한 후 `다음` 버튼을 클릭하면 마법사가 다음과 같은 `계기 설정` 화면을 표시합니다.

![image.42a0af](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/5782ed59-7caa-432e-b8fb-3d0b076233da/image.42a0af.b7cac7.png)

`필드` 편집기에서는 계기의 스케일 범위를 정의할 수 있습니다.
`계기 포인터` 편집기는 포인터로 표시된 값을 설정하도록 지원합니다.
`계기 레이블` 편집기에서는 계기 내에 표시되는 텍스트를 사용자 정의할 수 있습니다.

### 값

계기 도표의 `값` 컬렉션은 계기 스케일을 분할합니다. 각 `값`은 범위의 상한을 나타냅니다. 값은 큰 값에서 작은 값으로 내림차순 정렬되어야 합니다. 도표는 [차트 팔레트](/activereportsjs/docs/v6.1/#general-chart-configuration) 범위 내에서 색상을 선택합니다.
도표 속성에서 `범례에 값 이름 표시` 플래그를 설정하면 각 값에 대해 범례에 표시될 `캡션` 속성을 지정할 수 있습니다.
예를 들어 [계기 도표 데모](/activereportsjs/demos/Reports/GaugePlot/purejs)에서 스케일 범위 설정에 사용되는 4개의 명명된 값은 `100`, `75`, `50`, `25`입니다. 그 결과 계기 스케일에서 네 가지 구간을 볼 수 있으며 각 구간은 서로 다른 색으로 표시되고 또한 범례는 각 구간의 이름을 표시합니다.

### 축

계기 도표에는 [축 문서](/activereportsjs/docs/v6.1/)의 설명대로 계기 스케일 레이블 외형 및 기타 속성을 구성하는 `Y 축`이 있습니다.

### 계기 포인터

`계기 포인터` 컬렉션은 다수의 포인터를 생성하여 계기 스케일의 특정 포인트를 강조 표시하도록 지원합니다. 각 포인터마다 다음 속성을 사용자 정의할 수 있습니다.

* `배경 색` 표현식은 포인터의 채우기 색상을 설정합니다.
* `바늘 너비` 길이 값은 포인터 크기를 결정합니다.
* `바늘 핀 너비` 길이 값은 포인터 밑에 위치한 원의 크기를 조절합니다.
* `끝` 표현식은 포인터에 의해 표현된 값을 지정합니다.

예를 들어 [계기 도표 데모](/activereportsjs/demos/Reports/GaugePlot/purejs)에서는 포인터의 `끝`이 `{satisfaction_score}` 표현식으로 설정되어 포인터가 현재 측면의 점수를 나타냅니다.

### 계기 레이블

`계기 레이블` 컬렉션을 통해 게이지에 표시되는 텍스트 요소를 포함할 수 있습니다. 각 레이블에 대해 다음 속성을 구성할 수 있습니다.

* `텍스트` 표현식은 레이블의 콘텐츠를 설정합니다.
* `오프셋 X` 및 `오프셋 Y` 길이 값은 계기 중심에 상대적으로 레이블의 위치를 결정합니다.
* [텍스트 속성](/activereportsjs/docs/v6.1/#text-properties)의 하위 집합을 통해 레이블의 외형을 사용자 정의할 수 있습니다.

예를 들어 계기 데모에서 유일한 레이블의 텍스트는 `{aspect}` 표현식으로 구성되어 현재 측면이 포인터에 가깝게 표시되도록 합니다.

### 계기 외형

아래 속성은 `계기` 도표의 외형을 사용자 정의하도록 지원합니다. [계기 도표 데모](/activereportsjs/demos/Reports/GaugePlot/purejs)에서 구성을 조정하여 각 효과를 직접 확인하십시오.

* `불투명`: 백분율로 표현되는 [숫자](/activereportsjs/docs/v6.1/#scalar)입니다. 계기 스케일 및 포인터의 불투명도를 설정합니다. `100%`는 완전 불투명, `0%`는 완전 투명을 뜻합니다.
* `내부 반경`: 계기 스케일과 중심 사이 공간을 정의하는 외부 반경의 백분율 [숫자](/activereportsjs/docs/v6.1/#scalar)입니다.
* `시작 각도`: 도표의 시계 방향 회전을 지정하는 호 각도 [숫자](/activereportsjs/docs/v6.1/#scalar)입니다. 전체 회전은 `360`도입니다.
* `스윕`: 도표가 차지하는 호 길이를 결정하는 `0`~`360` 범위의 [숫자](/activereportsjs/docs/v6.1/#scalar)(호 각도)입니다.
* `클리핑 모드`: [도표 영역](/activereportsjs/docs/v6.1/#plot-area)이 도표를 렌더링하는 방식을 정의합니다.
    * `맞춤`을 선택하면 도표 영역이 모든 가용 공간을 도표 맞춤에 사용합니다.
    * `자르기`를 선택하면 도표 영역의 오른쪽 또는 아래쪽 안쪽 여백 가장자리에서 도표가 잘립니다.
    * `없음`은 `맞춤`과 같습니다.
* `스타일` 섹션의 [줄](/activereportsjs/docs/v6.1/#line-properties) 속성은 스케일의 범위 경계 외형에 영향을 미칩니다.
* `배경` 섹션의 색상 [표현식](/activereportsjs/docs/v6.1/#expression)은 스케일 범위의 채우기 색상을 결정하며 `차트 팔레트` 색상을 오버라이드합니다.

### 작업

이 속성 그룹은 보고서 구독자가 계기 스케일의 내부를 클릭할 때 [대화형 작업](/activereportsjs/docs/v6.1/#action-property)을 결정합니다. [바인딩된 필드 참조](/activereportsjs/docs/v6.1/#data-set-fields)를 사용하여 드릴스루 보고서의 매개 변수를 전달하거나 동적 책갈피 또는 URL을 구성할 수 있습니다. 필드 값은 현재 데이터 범위 내에서 평가됩니다. 자세한 내용은 [드릴스루 보고서 연습](/activereportsjs/docs/v6.1/)을 참조하십시오. 여기서는 드릴스루 [세로 막대형 도표](/activereportsjs/docs/v6.1/)를 설정하는 방법에 대해 설명하지만 동일한 기법을 원형 도표에도 적용할 수 있습니다.