기초튜토리얼 [Wijmo 시작하기] Gauge 사용법 - 기본편
페이지 정보
작성자 MESCIUS루시
작성일 2023-11-23 10:45 조회 98회
댓글 0건
본문
관련링크
현대 웹 애플리케이션에서 매출 목표 달성률, 웹 트래픽 상태와 같은 데이터를 표시할 때 데이터 시각화가 중요한 요소로 강조되고 있으며 개발자와 디자이너들은 사용자에게 직관적이고 명확한 정보를 제공하기 위해 노력하고 있습니다.
이러한 추세에 부응하여 Wijmo(위즈모)는 그리드(Grid), 차트(Chart), OLAP 피벗, Input (텍스트 박스, 콤보 박스, 달력 등..)과 같이 데이터를 시각화하고 관리할 수 있는 다양한 UI 컨트롤을 제공하고 있습니다.
앞서 언급드린 것과 같이 Wijmo에는 비즈니스 애플리케이션에서 사용할 수 있는 UI를 폭넓게 지원하고 있으며 그 중에서도 빼놓을 수 없는 컨트롤군, Gauge(게이지)가 포함되어 있습니다.
Wijmo Gauge는 원형, 반원형, 직선형 등 여러 옵션 데이터를 표현할 수 있습니다. 이러한 옵션들을 통해 다양한 산업 및 응용 프로그램에서 작업 진행 상태, 지표 표시 등 여러 요구 사항을 충족시킬 수 있습니다.
이번 포스팅에서는 동적 데이터 표시와 같은 편리한 기능을 갖춘 "Gauge(게이지)" 컨트롤의 기본적인 사용법을 소개하도록 하겠습니다.
목차
이번 포스팅에서는 하단의 개발 환경을 사용하였습니다.
더불어, 이번 Gauge 시작하기 글에서 사용할 파일은 아래와 같습니다.
page1.html |
페이지 메인. 페이지의 요소로 Gauge 컨트롤(선형 게이지)을 배치합니다. |
page2.html |
페이지 메인. 페이지의 요소로 Gauge 컨트롤(불렛 그래프)을 배치합니다. |
page3.html |
페이지 메인. 페이지의 요소로 Gauge 컨트롤(원형 게이지)을 배치합니다. |
page1.js |
Gauge 컨트롤(선형 게이지)을 생성하는 코드를 입력합니다. |
page2.js |
Gauge 컨트롤(불렛 그래프)을 생성하는 코드를 입력합니다. |
page3.js |
Gauge 컨트롤(원형 게이지)을 생성하는 코드를 입력합니다. |
styles.css |
다양한 페이지 요소의 스타일 정의합니다. |
페이지의 요소 스타일을 다음과 같이 "styles.css"로 정의합니다.
body{
margin:20px;
}
#gauge1 .wj-face path, #gauge2 .wj-face path {
fill : #f7fff7;
stroke: #afbed1;
stroke-width: 0px;
width:20px;
}
#gauge1{
height: 2em;
width: 600px;
margin-left: 20px;
margin-top: 20px;
margin-bottom:60px;
}
#gauge2{
width: 600px;
margin-left: 20px;
margin-top: 40px;
margin-bottom:60px;
}
#gauge3{
height: 240px;
width: 600px;
margin-left: 20px;
margin-top: 40px;
}
선형 게이지 생성
이제 page1.html과 page1.js에 다음과 같은 코드를 작성하여 Gauge 컨트롤을 만들어 주겠습니다.
여기에서는 세 종류의 게이지 중, 선형 게이지를 표시하는 방법을 소개합니다.
page1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>선형 게이지</title>
<link rel="stylesheet" type="text/css" href="css/wijmo.min.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="scripts/wijmo.min.js"></script>
<script src="scripts/wijmo.gauge.min.js"></script>
<script src="scripts/cultures/wijmo.culture.ko.min.js"></script>
<script src="scripts/page1.js"></script>
</head>
<body>
<div>
<h4>선형 게이지</h4>
<label>선형 게이지 방향: </label>
<select id="direction">
<option value="Left">왼쪽</option>
<option value="Right" selected>오른쪽</option>
<option value="Up">위</option>
<option value="Down">아래</option>
</select>
</br></br>
</div>
<div id="gauge1"></div>
</body>
</html>page1.js
document.addEventListener("DOMContentLoaded", function () {
InitializeGauge()
});
function InitializeGauge(){
// 선형 게이지 기본 설정
const linearGauge = new wijmo.gauge.LinearGauge('#gauge1', {
min: 0,
max: 100,
value: 75,
step: 1,
thickness:0.3,
thumbSize:25,
isAnimated: true,
isReadOnly: false,
showRanges: false,
showText: 'All',
ranges: [
{ min: 0, max: 30, color: '#EF5350' },
{ min: 30, max: 70, color: '#f5ef42' },
{ min: 70, max: 100, color: '#427ef5' },
]
});
// 선형 게이지 방향 전환
document.querySelector('#direction').addEventListener('change', e => {
switch(document.querySelector('#direction').value){
case 'Left':
linearGauge.direction = 'Left';
linearGauge.hostElement.style.height = '2em';
linearGauge.hostElement.style.width = '600px';
linearGauge.hostElement.style.marginTop = '80px';
linearGauge.hostElement.style.marginLeft = '20px';
break;
case 'Right':
linearGauge.direction = 'Right';
linearGauge.hostElement.style.height = '2em';
linearGauge.hostElement.style.width = '600px';
linearGauge.hostElement.style.marginTop = '80px';
linearGauge.hostElement.style.marginLeft = '20px';
break;
case 'Up':
linearGauge.direction = 'Up';
linearGauge.hostElement.style.height = '240px';
linearGauge.hostElement.style.width = '2em';
linearGauge.hostElement.style.marginTop = '-30px';
linearGauge.hostElement.style.marginLeft = '100px';
break;
case 'Down':
linearGauge.direction = 'Down';
linearGauge.hostElement.style.height = '240px';
linearGauge.hostElement.style.width = '2em';
linearGauge.hostElement.style.marginTop = '-30px';
linearGauge.hostElement.style.marginLeft = '100px';
break;
}
});
}LinearGauge 클래스의 생성자 내에 설정하는 속성은 선형 게이지 이외의 게이지와 동일합니다.
다음은 각 기능에 대한 설명입니다.
속성 이름 |
설명 |
min |
게이지에 표시할 수 있는 최소값 |
max |
게이지에 표시할 수 있는 최대값 |
value |
게이지에 표시되는 값 |
step |
value 속성을 증감하는 양 |
isAnimated |
값 변경시 애니메이션의 유무 |
isReadOnly |
값 편집 여부 |
showRanges |
범위 속성에 포함된 범위 표시/숨기기 |
showText |
표시할 텍스트 유형 |
ranges |
영역을 지정할 범위 컬렉션 |
'select' 태그의 'change' 이벤트에 설정된 'direction' 속성은 선형 게이지 전용 기능으로, 값이 증가하는 방향을 지정합니다.
하단의 표는 설정 값과 증가 방향에 대해 설명합니다.
속성 이름 |
이름 |
Left |
오른쪽에서 왼쪽으로 증가 |
Right |
왼쪽에서 오른쪽으로 증가 |
Up |
아래에서 위로 증가 |
Down |
위에서 아래로 증가 |
작성한 결과입니다.
선형 게이지(오른쪽으로 증가)
또한 마우스로 게이지를 변경 시 'value' 속성의 값이 'ranges' 컬렉션에 지정된 범위에 따라 게이지 색상이 변경됩니다.
'select' 태그에서 'Up'을 선택하면 아래 그림과 같이 됩니다.
이때 두 가지 속성도 동시에 변경하여 가로 방향 게이지를 적절하게 세로 방향으로 만듭니다.
- hostElement.style.height
- hostElement.style.width
불렛 그래프 생성
선형 게이지와 비슷한 불렛 그래프를 생성하도록 하겠습니다.
불렛 그래프는 현재 값과 대상 값을 표시할 수 있습니다.
또한, 현재 값이 양호한지 나쁜지 식별하기 위한 범위를 설정할 수도 있습니다.
불렛 그래프에 기능은 다음과 같습니다.
속성 이름 |
설명 |
bad |
값이 부정적인 것으로 간주되는 기준값 |
good |
값이 양호한 것으로 간주되는 기준값 |
target |
목표치 |
이러한 속성의 값을 알기 쉽게 표시하려면 하단의 코드 단에서 보시는 것처럼, showRanges 속성을 true로 설정해야 합니다.
참고
해당 속성이 'false'일 때는 'value' 속성이 상단의 속성 값들을 넘을 때마다 게이지의 색이 변화할 뿐입니다.
즉, 각 속성 설정치가 어디에 있는지 확인하기 어려워집니다.
불렛 그래프를 표시하는 'page2.html'과 'page2.js'는 다음과 같습니다.
page2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>불렛 그래프</title>
<link rel="stylesheet" type="text/css" href="css/wijmo.min.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="scripts/wijmo.min.js"></script>
<script src="scripts/wijmo.gauge.min.js"></script>
<script src="scripts/cultures/wijmo.culture.ko.min.js"></script>
<script src="scripts/page2.js"></script>
</head>
<body>
<div id="gauge2"></div>
</body>
</html>page2.js
document.addEventListener("DOMContentLoaded", function () {
InitializeGauge()
});
function InitializeGauge(){
// 불렛 그래프 기본 설정
const bulletGauge = new wijmo.gauge.BulletGraph('#gauge2', {
min: 0,
max: 100,
value: 75,
step: 1,
bad: 30,
good: 70,
target: 75,
isAnimated: true,
isReadOnly: false,
showRanges: true,
showText: 'All',
ranges: [
{ min: 0, max: 30, color: '#FFFADD' },
{ min: 30, max: 70, color: '#FFCC70' },
]
});
}결과는 아래와 같습니다.
원형 게이지 생성
원형 게이지는 도넛 차트에서 일부 세그먼트를 잘라낸 모양입니다.
원형 게이지의 특정 기능은 다음 속성으로 설정합니다.
속성 이름 |
설명 |
startAngle |
게이지의 시작 각도 |
sweepAngle |
게이지 시작부터 끝까지의 각도 |
autoScale |
게이지의 자동 스케일링 목표 값 |
여기에서는 showRanges 속성을 true로 설정하여 범위 속성에서 설정한 영역을 표시합니다. 더불어 "pointer" 속성이 참조하는 "range"클래스의 "thickness"속성을 통해 게이지의 폭을 좁혀 영역을 보기 쉽게 설정할 수 있습니다.
원형 게이지를 표시하는 'page3.html'과 'page3.js'는 다음과 같습니다.
page3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>원형 게이지</title>
<link rel="stylesheet" type="text/css" href="css/wijmo.min.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="scripts/wijmo.min.js"></script>
<script src="scripts/wijmo.gauge.min.js"></script>
<script src="scripts/cultures/wijmo.culture.ko.min.js"></script>
<script src="scripts/page3.js"></script>
</head>
<body>
<div id="gauge3"></div>
</body>
</html>page3.js
document.addEventListener("DOMContentLoaded", function () {
InitializeGauge()
});
function InitializeGauge(){
// 원형 게이지 기본 설정
const radialGauge = new wijmo.gauge.RadialGauge('#gauge3', {
min: 0,
max: 100,
value: 75,
step: 1,
isAnimated: true,
isReadOnly: false,
showRanges: true,
showText: 'All',
pointer: {
thickness: 0.4,
color: 'steelblue'
},
ranges: [
{ min: 0, max: 30, color: '#FFFADD' },
{ min: 30, max: 70, color: '#FFCC70' },
{ min: 70, max: 100, color: '#8ECDDD' },
],
startAngle: 90,
sweepAngle: 270,
autoScale: false
});
}하단은 코드를 작성한 결과 이미지입니다.
편의상 세 개의 컨트롤을 하나의 데모에 추가해 두었습니다. 이 점 참고 부탁드립니다.
마치며
오늘은 Wijmo Input 컨트롤 중 Gauge(게이지)의 기본 기능에 대해 알아보았습니다.
다양한 애플리케이션에 최적의 Gauge(게이지) 기능을 제공하는 Wijmo를 사용하여 쉽고 빠르게 개발해 보시길 바랍니다.
다음 포스팅에서는 Menu 컨트롤 사용법(기본기능편)에 대해 소개하도록 하겠습니다.
다음 시리즈 글도 기대해 주세요!
감사합니다.
지금 바로 Wijmo를 다운로드하여 직접 테스트해 보세요!
댓글목록
등록된 댓글이 없습니다.
