ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Google chart api 소개
    카테고리 없음 2023. 5. 14. 23:29

    API 연결

    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    </head>

     

    차트 생성 영역 추가

    <body>
        <div id="chart_div" style="width: 1000px; height: 600px;"></div>
    </body>

     

    스크립트 영역

    google.charts.load('current', {'packages':['bar']});
    google.charts.setOnLoadCallback(drawChart);
     
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['No', 'Name', 'Age'],
            ['1', 'Kim, 22],
            ['2', 'Choi', 56],
            ['3', 'Lee', 31],
            ['4', 'Park', 34]
        ]);
     
        var options = {
            chart: {
            title: 'Chart',
            subtitle: 'Chart Subtitle',
            }
        };
     
        var chart = new google.charts.Bar(document.getElementById('chart_div'));
     
        chart.draw(data, google.charts.Bar.convertOptions(options));
    }

    댓글

Designed by Tistory.