Vue.js 강좌 구글차트로 데이터를 실시간으로 표현 13

이전 강의

2022.12.28 - [Web Front 개발공부/Vue.js] - Vue.js 강좌 심화 배열 다루기 조건, 반복 디렉티브 v-if, v-for 12

Vue.js 강좌 심화 배열 다루기 조건, 반복 디렉티브 v-if, v-for 12

Vue.js 강좌 심화 배열 다루기 조건, 반복 디렉티브 v-if, v-for 12 많은 양의 데이터를 반복 표시하는 방법으로 테이블로 만들어 본다. 유명한 축구 5개국의 최근 4년간 피파랭킹 순위를 배열로 선언,

ecolumbus.tistory.com

이번 포스팅에서 구현할 예제

구글에서 제공하는 구글 그래픽 차트를 cnd으로 불러와 실시간으로 그래픽의 데이터 내용이 변하는 기능을 구현해보고자 한다.

CDN으로 설치할 수 있으므로 손쉽다.

자바스크립트만을 사용해서는 실시간으로 움직이는 차트를 구현하기가 꽤 까다롭다. 하지만 양방향 바인딩을 제공하는 Vue.js에서는 인터랙티브 하게 유저가 데이터를 변경하면 움직이는 그래프를 만들 수가 있다.

구글차트 홈페이지에서 제공하는 원형 차트 예제를 갖고 기능을 구현해본다.

Google Chart 원형 차트 예제

Google Charts 라이브러리를 CDN으로 불러온다.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

소스

new Vue 인스턴스에 아직 코딩 전이지만, 구글 차트를 cdn으로 불러와 기능을 구현한 상태다.

<!DOCTYPE html>
<html xmlns:v_on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>슬기형과 함께하는 Vue.js</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
        var v_data = [
            ['Task', 'Hours per Day'],
            ['일하기', 11],
            ['먹기', 2],
            ['가족과 대화', 2],
            ['TV 보기', 2],
            ['잠자기', 7]
        ];
            google.charts.load('current', {'packages': ['corechart']});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = google.visualization.arrayToDataTable(v_data);
                var options = {title: '주말에 내가 집에서 하는 활동', "is3D": true}; //
                var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                chart.draw(data, options);
            }
    </script>
</head>
<body>
<h1>Vue.js 강좌 구글차트로 데이터를 실시간으로 표현 13</h1>
<h2></h2>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<div id="app">
</div>
</body>
</html>

실행

추가 코딩

집에서 하는 일들에 대한 버튼을 구현하고 methods에 함수를 구현해서 실시간으로 데이터를 변하게 해 보자.

<div id="app"> 태그 아래에 데이터를 반복하는 코드를 넣고 버튼도 달아본다.

<div id="app">
    <li v-for="(item, idx ) in dataArray" v-if="idx > 0">{{item[0]}} : {{item[1]}}
        <button v-on:click="addOne(idx)">투표하기</button>
    </li>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            dataArray:v_data
        },
        methods: {
            addOne:function (idx) {
                var obj = this.dataArray[idx];
                obj[1]++;
                this.dataArray.splice(idx, 1, obj);
                drawChart();
            }
        }
    })
</script>

실행결과

전체 소스

<!DOCTYPE html>
<html xmlns:v_on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>슬기형과 함께하는 Vue.js</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
        var v_data = [
            ['Task', 'Hours per Day'],
            ['일하기', 11],
            ['먹기', 2],
            ['가족과 대화', 2],
            ['TV 보기', 2],
            ['잠자기', 7]
        ];
            google.charts.load('current', {'packages': ['corechart']});
            google.charts.setOnLoadCallback(drawChart);

            function drawChart() {
                var data = google.visualization.arrayToDataTable(v_data);
                var options = {title: '주말에 내가 집에서 하는 활동', "is3D": true}; //
                var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                chart.draw(data, options);
            }
    </script>
</head>
<body>
<h1>Vue.js 강좌 구글차트로 데이터를 실시간으로 표현 13</h1>
<h2></h2>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<div id="app">
    <li v-for="(item, idx ) in dataArray" v-if="idx > 0">{{item[0]}} : {{item[1]}}
        <button v-on:click="addOne(idx)">투표하기</button>
    </li>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            dataArray:v_data
        },
        methods: {
            addOne:function (idx) {
                var obj = this.dataArray[idx];
                obj[1]++;
                this.dataArray.splice(idx, 1, obj);
                drawChart();
            }
        }
    })
</script>
</body>
</html>

v_data의 첫 번째 열 값을 빼고 투표하기 버튼을 v-for문과 v-if을 이용해 동적으로 생성하고 버튼에 addOn(idx) 메서드를 연결시켰다. 숫자를 증가시킴으로 데이터와 연결된 그래프가 실시간으로 변경된다. 비록 다른 데이터들의 수자가 줄어드는 것까지는 완벽하게 구현하지 않은 상태다.

[참고]

구글 차트는 다양한 그래픽 차트를 제공한다.

예제도 다양하고 손쉽게 따라 할 수가 있으므로 관심이 있다면 실습해보길 권한다.

구글차트 사용법

빠른 시작 | Charts | Google Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 빠른 시작 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 다음은 원형 차트

developers.google.com

다음 강의에서는 computed 옵션을 이용해 데이터의 변화를 감지하는 기능에 대해 알아본다.

저작자표시 비영리 변경금지

'Web Front 개발공부 > Vue.js' 카테고리의 다른 글

Vue.js 강좌 데이터 감시 및 가공 - 산출속성(computed) 14 - 2 (0)	2022.12.31
Vue.js 강좌 데이터 감시 및 가공 - 산출속성(computed) 14 (0)	2022.12.30
Vue.js 강좌 심화 배열 다루기 조건, 반복 디렉티브 v-if, v-for 12 (0)	2022.12.28
Vue.js 강좌 조건, 반복 (v-if ,v-for) 11 (0)	2022.12.28
Vue.js 강좌 파라미터를 전달하여 이벤트 처리 v-on 10 (0)	2022.12.28

슬기로운 개발자 생활

Vue.js 강좌 구글차트로 데이터를 실시간으로 표현 13