공공데이터 이용하기 10 ( Jquery 및 데이터 적용시키기 part2)

KHW·2021년 1월 26일

Danfo.js

목록 보기

13/23

Jquery

내가 이걸 쓰게 될 줄은 몰랐다. Tooltip구현을 위해서 쉬운 방법이 없나 찾다가 Jquery 관련 블로그를 보며 간단히 사용하는 코드를 보았다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
    $(document).tooltip();
});
</script>
<style>
</style>
</head>
 

<body>
<a href="https://pentode.tistory.com/" title="쉬고 싶은 개발자<br/>프로그래밍 팁">쉬고 싶은 개발자</a>
</body>
</html>

이것을 공공데이터를 mouseover 할 경우 적용시키게 하기 위해서 한번 시도를 해보았다.

적용내용

아래 코드는 korea.js의 일부 코드이다. (구현만이라도 하려해서 코드가 매우 더럽다(?)

Plot_Button.addEventListener('click',function(){
        dfd.read_csv(`https://khw970421.github.io/covid/Modify_Danfo/Data/Date/${input.value.replace(/-/gi,'').slice(2,8)}.csv`)
            .then(
                function(data) {
                    const incDec_Length_Except_Sum = data.body__items__item__incDec.data.length-1;
                    const gubun_Length_Except_Sum = data.body__items__item__gubun.data.length-1;

                    df = new dfd.DataFrame({
                        Price: data.body__items__item__incDec.data.slice(0,incDec_Length_Except_Sum),   //표의 맨 아래 합계를 제거한 내용들
                    })

                    service = df.Price.data;

                    let j = document.getElementById('label-Jeju-do')
                    let gn = document.getElementById('label-Gyeongsangnam-do')
                    let gb= document.getElementById('label-Gyeongsangbuk-do')
                    let jb = document.getElementById('label-Jeollabuk-do')
                    let jn = document.getElementById('label-Jeollanam-do')
                    let  cb= document.getElementById('label-Chungcheongbuk-do')
                    let  cn= document.getElementById('label-Chungcheongnam-do')
                    let  gw= document.getElementById('label-Gangwon-do')
                    let gg = document.getElementById('label-Gyeonggi-do')
                    let sj = document.getElementById('label-Sejong')
                    let us = document.getElementById('label-Ulsan')
                    let  dj= document.getElementById('label-Daejeon')
                    let  gj= document.getElementById('label-Gwangju')
                    let  ic= document.getElementById('label-Incheon')
                    let  dg= document.getElementById('label-Daegu')
                    let  bs= document.getElementById('label-Busan')
                    let  su= document.getElementById('label-Seoul')

                    j.addEventListener('mouseover',function(){
                        j.setAttribute('title',service[0]);

                    });
                    gn.addEventListener('mouseover',function(){
                        gn.setAttribute('title',service[1]);

                    });
                    gb.addEventListener('mouseover',function(){
                        gb.setAttribute('title',service[2]);

                    });
                    jb.addEventListener('mouseover',function(){
                        jb.setAttribute('title',service[3]);

                    });
                    jn.addEventListener('mouseover',function(){
                        jn.setAttribute('title',service[4]);

                    });
                    cb.addEventListener('mouseover',function(){
                        cb.setAttribute('title',service[5]);

                    });
                    cn.addEventListener('mouseover',function(){
                        cn.setAttribute('title',service[6]);

                    });
                    gw.addEventListener('mouseover',function(){
                        gw.setAttribute('title',service[7]);

                    });
                    gg.addEventListener('mouseover',function(){
                        gg.setAttribute('title',service[8]);

                    });
                    sj.addEventListener('mouseover',function(){
                        sj.setAttribute('title',service[9]);

                    });
                    us.addEventListener('mouseover',function(){
                        us.setAttribute('title',service[10]);

                    });
                    dj.addEventListener('mouseover',function(){

                        dj.setAttribute('title',service[11]);
                    });
                    gj.addEventListener('mouseover',function(){

                        gj.setAttribute('title',service[12]);
                    });
                    ic.addEventListener('mouseover',function(){
                        ic.setAttribute('title',service[13]);

                    });
                    dg.addEventListener('mouseover',function(){
                        dg.setAttribute('title',service[14]);

                    });
                    bs.addEventListener('mouseover',function(){
                        bs.setAttribute('title',service[15]);

                    });
                    su.addEventListener('mouseover',function(){
                        su.setAttribute('title',service[16]);

                    });
                }
            )
            .catch(() => {

                alert('저장된 데이터 이외의 날짜를 클릭했습니다.');
            })


    });