마카로닉스

1770 No

Vue.js 구글 차트 연동

2021-11-07 22:44:45 By 라이트 0 468 댓글수 4 포스트 하기

5월 2025
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

<!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">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    
</head>
<body>
    <h2>Google Charts로 원그래프를 그리는 예제</h2>
    <h3>선호하는 점심 메뉴 투표</h3>

    <div id="app">
        <h2>뷰</h2>
        <input type="text"  @keyup.enter="addOrg(inputOrgdata)" v-model="inputOrgdata">
        {{inputOrgdata}}
        <ul>
            <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>
        </ul>
    </div>

    <div id="draw_pie_chart_div" style="height: 500px; width: 500px; "></div>

    <br>
    <br>
    <div id="draw_column_chart_div" style="height: 500px; width: 500px; "></div>

    <br>
    <br>
    <div id="draw_column_combo__div" style="height: 500px; width: 3500px; "></div>

    





    <script>
        //그래프에 사용할 데이터
        var orgdata=[
            ['종류', '개수'],
            ['도시락',3], ['갈비탕', 4],['오므라이스', 5],
            ['짬뽕', 1],['비빔밥', 3],['메밀소바', 1]
        ];
        google.charts.load('current', {packages: ['corechart']});
        google.charts.setOnLoadCallback(drawPieChart);
        google.charts.setOnLoadCallback(drawColumnChart);
        google.charts.setOnLoadCallback(drawComboChart);

        function drawPieChart() {
            var data = google.visualization.arrayToDataTable(orgdata);
            var options={title:'선호하는 점심', "is3D" :true};            
            var chart = new google.visualization.PieChart(document.getElementById('draw_pie_chart_div'));
            chart.draw(data, options);
        }

        function drawColumnChart() {
            var data = google.visualization.arrayToDataTable(orgdata);
            var options={title:'선호하는 점심', "is3D" :true};            
            var chart = new google.visualization.ColumnChart(document.getElementById('draw_column_chart_div'));
            chart.draw(data, options);
        }

        function drawComboChart() {
            var data = google.visualization.arrayToDataTable(orgdata);
            var options={title:'선호하는 점심', "is3D" :true};            
            var chart = new google.visualization.ComboChart(document.getElementById('draw_column_combo__div'));
            chart.draw(data, options);
        }
    </script>


    <script>
         new Vue({
            el:"#app",
            data:{
                dataArray:orgdata,
                inputOrgdata:''
            },

            methods: {
               addOne(val){
                 let obj =this.dataArray[val];
                 obj[1]++;
                 this.dataArray.splice(val,1,obj);
                 drawPieChart();
                 drawColumnChart();
                 drawComboChart();
               } ,

               addOrg(inputOrgdata){
                  // alert("추가 :" + this.inputOrgdata);
                   const addData= [ this.inputOrgdata, 1]
                   this.dataArray.push(addData);
                   drawChart();

               },

               subOne(val){
                   let obj=this.dataArray[val];
                   obj[1]--;
                   this.dataArray.splice(val,1, obj);
                   drawPieChart();
                   drawColumnChart();
                   drawComboChart();
               }
            },
         });      
    </script>

  
</body>
</html>

jquery