Languages/Vue.js

[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>

 

 

 

 

 

 

실행 결과

 

 

 

 

반응형