728x90
반응형
Google Chart 코드 가져오는 방법
https://developers-dot-devsite-v2-prod.appspot.com/chart
Charts | Google Developers
Interactive charts for browsers and mobile devices.
developers.google.com
해당 화면 하단의 코드를 복붙한다.
구글차트 사용해보기
- Google Charts 라이브러리의 CDN을 지정하는 방법
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구글 차트와 연동하기</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<h2>Google Charts로 원그래프 그리기</h2>
<h3>선호하는 점심 메뉴 투표</h3>
<div id="chart_div" style="height: 500px;"></div>
<script>
//그래프에서 사용할 데이터
var orgdata = [
['종류', '개수'], ['도시락', 3], ['갈비탕', 4], ['뼈해장국', 8], ['김밥', 2],
['비빔밥', 1], ['메밀소바', 4]
];
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawBasic);
//그래프 그리는 함수
function drawBasic(){
var data = google.visualization.arrayToDataTable(orgdata);
var option = {title: '선호하는 점심', "is3D": true};
var chart = new google.visualization.PieChart(
document.getElementById('chart_div'));
chart.draw(data, option);
}
</script>
</body>
</html>
구글차트와 Vue 같이 사용하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구글 차트와 연동하기</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h2>Google Charts로 원그래프 그리기</h2>
<h3>선호하는 점심 메뉴 투표</h3>
<div id="chart_div" style="height: 500px;"></div>
<div id="app">
<li v-for="(item, c) in dataArray" v-if="c>0">{{item[0]}} : {{item[1]}}
<button v-on:click="addOne(c)">한표 + </button>
<button v-on:click="minOne(c)">한표 - </button>
</li>
</div>
<script>
//그래프에서 사용할 데이터
var orgdata = [
['종류', '개수'],
['도시락', 3], ['갈비탕', 4], ['뼈해장국', 8], ['김밥', 2],
['비빔밥', 1], ['메밀소바', 4], ['떡볶이', 3]
];
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawBasic);
//그래프 그리는 함수
function drawBasic(){
var data = google.visualization.arrayToDataTable(orgdata);
var option = {title: '선호하는 점심', "is3D": true};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, option);
}
//Vue 데이터 연결
new Vue({
el : '#app',
data : {
dataArray : orgdata
},
methods : {
addOne : function(val){
var obj = this.dataArray[val];
obj[1]++;
this.dataArray.splice(val, 1, obj);
drawBasic();
},
minOne : function(val){
var obj = this.dataArray[val];
obj[1]--;
this.dataArray.splice(val, 1, obj);
drawBasic();
}
}
})
</script>
</body>
</html>
728x90
반응형