상세 컨텐츠

본문 제목

[차트] javascript, jQuery justGage 에니메이션 도넛 게이지 차트

Javascript, jQuery

by Coop 2023. 5. 11. 23:59

본문

 

기본 도넛 차트를 만들기

 

1. justGage 에니메이션 도넛 게이지 완성 이미지

기본 도넛 차트

 

 

 

 

 

 

 

 

 

 

2. justGage 에니메이션 도넛 게이지 전체코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!doctype html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>Defaults</title>
    <meta name="viewport" content="width=device-width">
    <style>
        .container {
            width: 600px;
            margin: 100px auto;
            text-align: center;
        }
 
        .gauge {
            width: 250px;
            height: 250px;
            display: inline-block;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <div id="gg1" class="gauge"></div>
        <div id="gg2" class="gauge" data-value="25"></div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.2/justgage.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function (event) {
 
            var dflt = {
                min: 0,
                max: 200,
                donut: true,
                gaugeWidthScale: 0.6,
                counter: true,
                hideInnerShadow: true
            }
 
            var gg1 = new JustGage({
                id: 'gg1',
                value: 125,
                title: 'javascript call',
                defaults: dflt
            });
 
            var gg2 = new JustGage({
                id: 'gg2',
                title: 'data-attributes',
                defaults: dflt
            });
 
        });
    </script>
</body>
 
</html>
 cs

 

 

 

 

 

 

 

 

 

 

3. justGage 에니메이션 도넛 게이지 스크립트 참조 주소

아래는 CDN 주소입니다. 스크립트 주소에 CDN 주소를 주소를 붙여서 사용하세요.

CDN (raphael, justgage)

1
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.2/justgage.js"></script>
  

 

 

 

 

 

 

 

 

 

 

 

4. justGage 에니메이션 도넛 게이지 스크립트 초기화

DOM트리가 완성되는 즉시 스크립트가 실행될 수 있도록 이벤트 추가

jQuery 라이브러리를 사용하여 페이지 로딩시 설정해도 무방합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
document.addEventListener("DOMContentLoaded", function (event) {
 
    var dflt = {
        min: 0,
        max: 200,
        donut: true,
        gaugeWidthScale: 0.6,
        counter: true,
        hideInnerShadow: true
    }
 
    var gg1 = new JustGage({
        id: 'gg1',
        value: 125,
        title: 'javascript call',
        defaults: dflt
    });
 
    var gg2 = new JustGage({
        id: 'gg2',
        title: 'data-attributes',
        defaults: dflt
    });
 
});

 

 

 

 

 

 

 

 

 

 

 

5. justGage refresh live demo

See the Pen justGage - default by coop (@ok_coop) on CodePen.

'Javascript, jQuery' 카테고리의 다른 글

How to Use jQuery Ajax to Send and Receive JSON Data (Complete Guide with Examples)  (0) 2025.03.17
jQuery foreach ($.each()) 사용법과 다양한 예제  (1) 2025.03.16
jQuery에서 Chart.js를 활용한 그래프 구현 방법  (2) 2025.03.16
소스코드 정렬 사이트 js-beautify  (0) 2023.05.20
[차트] javascript, jQuery justGage refresh 버튼  (0) 2023.05.16

관련글 더보기

댓글 영역

티스토리툴바