게이지(Gauge)

복수의 값을 표시하는 시리즈와 달리 단일 값을 표시한다. 2차원 좌표 대신 1차원 척도(자, scale)가 값의 배치를 지정하는 용도로 표시될 수 있다. 표시 형태가 다른 몇 가지 종류의 게이지가 있다.

모듈 설치 및 사용 방법

Gauge를 사용하기 위해서는 gauge모듈이 필요하다. 자세한 설명은 모듈 가이드에서 확인할 수 있다.

TypeScript / ES6 환경

TypeScript나 ES6 기반의 애플리케이션에서는 아래와 같이 JavaScript 모듈로 가져올 수 있다.

import RealChart from "realchart";
import Gauge from "realchart/gauge";
 
Gauge(RealChart);

Vanilla JavaScript 환경

Vanilla JavaScript 기반의 웹 페이지에서는 <script> 태그를 사용하여 모듈을 로드할 수 있다.

<script src="./lib/realchart-1.2.0.min.js"></script>
<script src="./lib/treemap.js"></script>

선형(Linear) 게이지

설정 type은 'linear'이다.
현재 값을 선형 막대로 표시한다.

Bullet 게이지

설정 type은 'bullet'이다.
현재 값을 목표 값과 비교해서 표시한다.

원형(Circle) 게이지

설정 type은 'circle'이다.
지정된 최대 각도(기본 360°) 내에서 현재 값의 비율에 맞는 각도의 원호로 표시한다.

시계

설정 type은 'clock'이다.
현재 시각을 원형 아날로그 시계 게이지로 표시한다.

설정

차트 설정의 최상위 'gauges'나 'gauge' 항목으로 설정하고, (목록으로 설정하는 다른 구성 요소의 경우와 같이 단/복수 형 모두 가능하지만 복수형이 우선한다.) 게이지의 종류는 'type' 속성으로 지정한다. 게이지가 둘 이상이면 배열로 지정하고, 하나면 배열 없이 지정해도 된다.

const config = {
    gauges: [{
        type: 'circle',
        value: 123
    }, {
    }]
    // 혹은
    gauge: {
        type: 'bullet'
    }
}