문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======HOW TO - Google Chart======
<WRAP left notice 80%>
  * description : How TO - Google Chart
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-09
</WRAP>
<WRAP clear></WRAP>
\\
====Ref====
[[https://developers.google.com/chart/interactive/docs/quick_start|Google Charts - Quick Start]]\\
\\
=====Pie Chart=====
{{:wiki:howto:googlepiechart.png?500|}}\\
<code javascript>
<!DOCTYPE html>
<html>

<head>
    <title>Google Pie Chart</title>
    <!-- Load the AJAX API -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

        // Load the Visualization API and the corechart packgage.
        google.charts.load('current', { 'packages': ['corechart'] });

        //Set a callback to run when the Google Visualization API is loaded. 
        google.charts.setOnLoadCallback(drawChart);

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it. 
        function drawChart() {

            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Topping');
            data.addColumn('number', 'Slices');
            data.addRows([
                ['Mushrooms', 3],
                ['Onions', 1],
                ['Olives', 1],
                ['Zucchini', 1],
                ['Pepperoni', 2]
            ]);

            // Set chart options
            var options = {
                'title': 'How Much Pizza I Ate Last Night',
                'width': 400,
                'height': 300
            };

            // Instantiate and draw out chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
</head>

<body>
    <!-- Div that will hold the pie chart -->
    <div id="chart_div"></div>
</body>

</html>
</code>

=====BarChart=====
{{:wiki:howto:barchart.png?500|}}\\
<code javascript>
<!DOCTYPE html>
<html>

<head>
    <title>Google Bar Chart</title>
    <!-- Load the AJAX API -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

        // Load the Visualization API and the corechart packgage.
        google.charts.load('current', { 'packages': ['corechart'] });

        //Set a callback to run when the Google Visualization API is loaded. 
        google.charts.setOnLoadCallback(drawChart);

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it. 
        function drawChart() {

            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Topping');
            data.addColumn('number', 'Slices');
            data.addRows([
                ['Mushrooms', 3],
                ['Onions', 1],
                ['Olives', 1],
                ['Zucchini', 1],
                ['Pepperoni', 2]
            ]);

            // Set chart options
            var options = {
                'title': 'How Much Pizza I Ate Last Night',
                'width': 500,
                'height': 300
            };

            // Instantiate and draw out chart, passing in some options.
            var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
</head>

<body>
    <!-- Div that will hold the pie chart -->
    <div id="chart_div"></div>
</body>

</html>
</code>























 
{{tag>오션, Google Charts}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
