728x90
Google charts 라이브러리의 CDN 지정 방법
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
구글 차트로 차트 표현해보기
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="style.css">
</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="subOne(c)">빼기</button></li>
</div>
<script>
//그래프에 사용할 데이터
var orgdata = [
['종류','개수',{role: 'style'}],
['도시락',3, 'color:gray'],['갈비탕',4, 'color:red'],['오므라이스',5, 'color:black'],
['짬뽕',1,'color:skyblue'],['비빔밥',3,'color:purple'],['메밀소바',1,'color:yellow']
];
//기본구조
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawBasic);s
//그래프를 그리는 함수
function drawBasic(){
var data = google.visualization.arrayToDataTable(orgdata);
//배열 orgdata를 가져옵니다
var options = {
title:'선호하는 점심', "is3D" : true,
series:{0:{color:'red'}}}
//차트 옵션: 차트 타이틀과 크기등 옵션을 지정합니다.
var chart = new google.visualization.BarChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
};
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js">
</script>
<script>
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();
},
subOne:function(val){
var obj=this.dataArray[val];
if(obj[1]>0){
obj[1]--;
this.dataArray.splice(val, 1, obj);
drawBasic();
}
}
}
})
</script>
</body>
</html>
option 에서의 series에서 0~n까지의 정수로 데이터의 legend 값을 지정해준후 속성을 부여 할수있습니다.
728x90
'Vue.js' 카테고리의 다른 글
| 데이터의 변화 감지 (Watch)(Vue.js) (0) | 2022.12.27 |
|---|---|
| 데이터를 사용한 별도 계산(computed)(Vue.js) (0) | 2022.12.26 |
| 배열 데이터를 테이블로 표시하기(Vue.js) (0) | 2022.12.26 |
| 뷰 에서의 조건문, 반복문 (Vue.js) (0) | 2022.12.23 |
| 키 입력을 Vue인스턴스의 메소드에 연결하기(Vue.js) (0) | 2022.12.22 |