-
[Vue.js] 구글 차트 그리기Languages/Vue.js 2021. 5. 13. 21:07반응형
구글차트 그리기
google chart는 google에서 소스를 지원해줍니당아아아
google에서 google 차트를 검색 후 원하는 chart를 이용해보세용~~~
<!DOCTYPE html> <html> <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"> <link rel="stylesheet" href="style.css"> <script src="https://www.gstatic.com/charts/loader.js"></script> <title>구글차트 그리기</title> </head> <body> <h2>원그래프 그리기</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> </li> </div> <script> var orgdata = [ ['종류','갯수'], ['도시락',3], ['갈비탕',4], ['오므라이스',5], ['짬뽕',1], ['비빔밥',3], ['짜장면',2] ] google.charts.load('current',{packages:['corechart']}) google.charts.setOnLoadCallback(drawBasic) function drawBasic(){ var data = google.visualization.arrayToDataTable(orgdata) var options = {title: '선호하는 점심',"is3D" : true} var chart = new google.visualization.PieChart( document.getElementById('chart_div') ) chart.draw(data, options) } </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() } } }) </script> </body> </html>
실행 결과
반응형'Languages > Vue.js' 카테고리의 다른 글
[Vue.js]Vue를 이용한 테이블 만들기 예제(+css) (0) 2021.04.08 [Vue.js]v-on이용해서 간단한 계산기 만들기 예제 (0) 2021.04.02 [Vue.js]v-bind/다양한 바인딩 만들기/뷰를 이용한 이미지 업로드/url 업로드/폰트크키/컬러지정 (0) 2021.04.02 [Vue.js]Vue예제 클릭한 횟수를 표시하는 버튼 +css (0) 2021.03.11 [Vue.js]Vue.js 의 시작/hello vue.js 만들기 (1) 2021.03.11