Timer Chart Sample

데이터

타이머를 기준으로 시간 초단위 흐름 데이터를 활용합니다.

타이머 설정

타이머 시간을 선택해주세요.

시작

중지

초기화

타이머 차트

차트의 의도

리얼차트 API를 활용해서 보다 쉽게 데이터를 동적으로 변경할 수 있는것을 보여주기 위해 작성하였습니다.

예시로 동적으로 데이터 변경을 보여주기 위해 게이지 차트를 활용한 타이머를 구현하였습니다.

게이지 차트

게이지 차트를 활용하면 단일 측정값을 기준으로 목표값의 진행 상태를 추적할 때 용이합니다.

게이지 차트는 여러 데이터가 아닌 단일 데이터로 차트 데이터를 컨트롤 할 수 있습니다.

리얼차트에서 제공하는 게이지 차트는 v0.9.18 기준으로 4가지 타입을 제공하고 있습니다.

이번 데모에서는 Circle Gauage 를 활용해서 타이머를 구현하셨습니다.

차트 API 활용

리얼차트에서 제공하는 API를 활용하면 초기 설정 이후에 차트에 대한 정보를 편리하게 변경할 수 있습니다.

const config = {
    gauge: [{
        name: 'timer1', // 첫번째 게이지 차트
        // ... 다른 설정
    }, {
        name: 'timer2', // 두번째 게이지 차트
        hand: true,
        pin: true,
        // ... 다른 설정
    }]
}
 
const chart = RealChart.createChart(document, 'realchart', config); // 차트 초기설정
 
const timer1Gauage = chart.getGauage('timer1') // 지정한 이름을 통해 첫번째 게이지 차트 가져오기
const timer2Gauage = chart.getGauage('timer2') // 지정한 이름을 통해 두번째 게이지 차트 가져오기
 
timer1Gauage.updateValue(20) // 첫번째 게이지 차트 값 20으로 변경
timer1Gauage.set('label.text', '첫번째 게이지 차트') // 첫번째 게이지 차트 라벨 텍스트 "첫번째 게이지 차트"로 변경
 
timer2Gauage.updateValue(30) // 두번째 게이지 차트 값 30으로 변경
timer2Gauage.set('label.text', '두번째 게이지 차트') // 두번째 게이지 차트 라벨 텍스트 "두번째 게이지 차트"로 변경

01 - 메트릭 차트 03 - 분야별 기관수 차트