Chart JS Sample01

description : Sass Introduction
author : 오션
email : shlim@repia.com
lastupdate : 2022-12-16 Fri

Sample 01-1

<!DOCTYPE html>
<html lang="en">
<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://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
    <title>Chart JS Test #01</title>
</head>
<body>
    <div style="width:900px; height:900px">
        <!-- 차트가 그려질 부분 -->
        <canvas id="myChart"></canvas>
    </div>
 
    <script type="text/javascript">
        let context = document.getElementById('myChart').getContext('2d');
        let myChart = new Chart(context, {
            type : 'bar'    // 차트의 형태
            , data :        // 차트에 들어갈 데이터
            {
                labels :    // X 축 
                [
                    '1', '2', '3', '4', '5', '6', '7'
                ]
                , datasets :    // 데이터
                [
                    {
                        label : '차트 제목'  // 차트 제목
                        , fill : false      // line 형태일 때, 선 안쪽을 채우는지 여부
                        , data : 
                        [
                            21, 19, 25, 20, 23, 26, 25  // X축 label에 대응되는 데이터 값
                        ]
                        , backgroundColor :     // 막대 그래프 색상
                        [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ]
                        , borderColor :         // 경계선 색상
                        [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ]
                        , borderWidth : 1       // 경계선 굵기
                    }
                ]
            },
            options : 
            {
                scales : 
                {
                    yAxes : 
                    [
                        {
                            ticks : 
                            {
                                beginAtZero : true
                            }
                        }
                    ]
                }
            }
        })
 
    </script>
    <!-- 출처 : https://mieumje.tistory.com/56 [Chart.js]Chart.js로 차트 그리기 -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<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://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
    <title>Chart JS Test #01</title>
</head>
<body>
    <div style="width:900px; height:900px">
        <!-- 차트가 그려질 부분 -->
        <canvas id="myChart"></canvas>
    </div>
 
    <script type="text/javascript">
        let context = document.getElementById('myChart').getContext('2d');
        let myChart = new Chart(context, {
            type : 'bar'    // 차트의 형태
            , data :        // 차트에 들어갈 데이터
            {
                labels :    // X 축 
                [
                    '1', '2', '3', '4', '5', '6', '7'
                ]
                , datasets :    // 데이터
                [
                    {
                        label : '차트 제목'  // 차트 제목
                        , fill : false      // line 형태일 때, 선 안쪽을 채우는지 여부
                        , data : 
                        [
                            21, 19, 25, 20, 23, 26, 25  // X축 label에 대응되는 데이터 값
                        ]
                        , backgroundColor :     // 막대 그래프 색상
                        [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ]
                        , borderColor :         // 경계선 색상
                        [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ]
                        , borderWidth : 1       // 경계선 굵기
                    }
                    ,
                    {
                        label : '잭과 콩나무'
                        , fill : false
                        , data : 
                        [
                            8, 34, 12, 24, 30, 5
                        ]
                        , backgroundColor : 'rgb(157, 109, 12)'
                        , borderColor : 'rgb(157, 109,12)'
                    }
                ]
            },
            options : 
            {
                scales : 
                {
                    yAxes : 
                    [
                        {
                            ticks : 
                            {
                                beginAtZero : true
                            }
                        }
                    ]
                }
            }
        })
 
    </script>
    <!-- 출처 : https://mieumje.tistory.com/56 [Chart.js]Chart.js로 차트 그리기 -->
</body>
</html>

오션,, ChartJS, Chart