반응형

구글차트 기본 사용법입니다.


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
32
33
34
<html>
    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
        //구글차트 
        google.charts.load('current', {'packages':['corechart']}); 
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string','Foods');
            data.addColumn('number','비중');
 
            data.addRows([ 
                ['피자',5],
                ['치킨',2],
                ['햄버거',3]
            ]);
            var opt = {
                    'title':'좋아하는 음식',
                    'width':200,
                    'height':200,
                    pieSliceText:'label',
                    legend:'none' 
            };
            var chart = new google.visualization.PieChart(document.getElementById('myChart'));
            chart.draw(data,opt);
        }
 
        </script>
    </head>
    <body>
        <div id="myChart"></div>
    </body>
</html>
cs



아래는 결과화면입니다.








자세한 사항은 아래의 해당 페이지 접속하셔서 확인하시면 됩니다.

https://developers.google.com/chart/?hl=ko


반응형

'개발 > API' 카테고리의 다른 글

[폰트] 외부폰트 적용 (css 폰트 적용)  (0) 2019.03.28
[SmartEditor2] 네이버 스마트에디터2 사용방법  (0) 2019.03.26

+ Recent posts

티스토리툴바