티스토리 뷰

SW 개발/웹

Bootstrap 4, 순위 그래프 출력하기

지단로보트 2018. 7. 16. 15:16

개요

  • HTML 기술을 사용하여 순위 그래프를 출력할 수 있다.

사용 기술

  • Handsontable: 액셀과 유사한 느낌을 주는 JavaScript 스프레드시트 라이브러리이다. 2차원 테이블 형식의 데이터를 표현하기 위한 자유도가 높아 순위 출력에 사용하기 적합하다.
  • Bootstrap: 함께 제공되는 Progress 컴포넌트를 사용하여 HTML 코드 만으로 순위 그래프를 출력할 수 있다.
  • jQuery Slim: Bootstrap을 구동하기 위해 선행 사용이 필수이다.

소스 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>대한민국 도시 인구 순위</title>
</head>
<body>
    <style type="text/css">
        @import url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css");
    </style>
    <style type="text/css">
        @import url("https://cdnjs.cloudflare.com/ajax/libs/handsontable/5.0.0/handsontable.full.min.css");

        .handsontable td,
        .handsontable tr,
        .handsontable th {
            border: 0 !important;
        }

        .handsontable th {
            background-color: #ffffff;
        }

        .sans {
            font: 0.8em sans-serif;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/5.0.0/handsontable.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.5.4/muuri.min.js"></script>

    <div class="grid">
        <div class="item">
            <div class="item-content">
                <h2>대한민국 도시 인구 순위</h2>
                <div id="7lfxIhp2GiscHjEmabeklB"></div>
            </div>
        </div>
    </div>

    <script>
        var data = [{
            city: '서울특별시',
            value: 991,
            percent: '<div class="progress"><div title="tooltip" class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 19.15%" aria-valuenow="19.15" aria-valuemin="0" aria-valuemax="100">19.15%</div></div>'
        }, {
            city: '부산광역시',
            value: 348,
            percent: '<div class="progress"><div title="tooltip" class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 6.72%" aria-valuenow="6.72" aria-valuemin="0" aria-valuemax="100">6.72%</div></div>'
        }, {
            city: '인천광역시',
            value: 295,
            percent: '<div class="progress"><div title="tooltip" class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 5.70%" aria-valuenow="5.70" aria-valuemin="0" aria-valuemax="100">5.70%</div></div>'
        }, {
            city: '전체',
            value: 5174,
            percent: '<div class="progress"><div title="tooltip" class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div></div>'
        }];
        var hot = new Handsontable(document.getElementById('7lfxIhp2GiscHjEmabeklB'), {
            data: data,
            rowHeaders: true,
            colWidths: [100, 100, 600],
            colHeaders: false,
            columns: [{
                data: "city",
                renderer: "numeric",
                className: "htMiddle sans",
                readOnly: true
            }, {
                data: "value",
                renderer: "numeric",
                className: "htMiddle sans",
                readOnly: true
            }, {
                data: "percent",
                renderer: "html",
                className: "htMiddle sans",
                readOnly: true
            }]
        });
        var grid = new Muuri('.grid', {
            dragEnabled: false,
            dragContainer: document.body,
            dragSort: function() {
                return [grid]
            }
        });
    </script>
</body>

</html>

출력 결과

대한민국 도시 인구 순위

저작자표시 비영리 동일조건
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
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
글 보관함