[JS] chart.js

Stack/JavaScript

[JS] chart.js

7ingout 2022. 9. 1. 14:54

index.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">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<style>
    div {
        width: 1200px;
    }
</style>
<body>
    <div>
        <canvas id="myChart"></canvas>  
    </div>
    <script type ="module" src="./chart.js"></script>
</body>	
</html>

chart.js

const MONTHS = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
];

export function months(config) {
var cfg = config || {};
var count = cfg.count || 12;
var section = cfg.section;
var values = [];
var i, value;

for (i = 0; i < count; ++i) {
    value = MONTHS[Math.ceil(i) % 12];
    values.push(value.substring(0, section));
}

return values;
}

  
const ctx = document.getElementById('myChart').getContext('2d');
    
// <block:segmentUtils:1>
const skipped = (ctx, value) => ctx.p0.skip || ctx.p1.skip ? value : undefined;   // 점선 or 스킵
const down = (ctx, value) => ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;   // 하향
// </block:segmentUtils>

// <block:genericOptions:2>
const genericOptions = {
fill: false,   // 선만 / true 할 경우 밑에 색 채우기
interaction: {
    intersect: false
},
radius: 0,   // 구분점
};
// </block:genericOptions>

const myChart = new Chart(ctx, {
type: 'line',
data: {
// labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
labels: months({count: 9}),
datasets: [{
    label: 'My First Dataset',
    data: [65, 59, NaN, 48, 56, 57, 40, NaN, 50],   // NaN일 경우 skip
    borderColor: 'rgb(75, 192, 192)',   // 상향(기본)
    segment: {
    borderColor: ctx => skipped(ctx, 'rgb(0,0,0,0.2)') || down(ctx, 'rgb(192,75,75)'),   // 하향
    borderDash: ctx => skipped(ctx, [6, 6]),   // 점선 [선 길이, 선 간격]
    },
    spanGaps: true   // false 하니 skip부분 안보임
}]
},
options: genericOptions
});




// // 해당 부분은 JS파일을 따로 만들어서 사용해도 된다.
// // 차트를 그럴 영역을 dom요소로 가져온다.
// var chartArea = document.getElementById('myChart').getContext('2d');
// // 차트를 생성한다. 
// var myChart = new Chart(chartArea, {
//     // ①차트의 종류(String)
//     type: 'bar',
//     // ②차트의 데이터(Object)
//     data: {
//         // ③x축에 들어갈 이름들(Array)
//         labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
//         // ④실제 차트에 표시할 데이터들(Array), dataset객체들을 담고 있다.
//         datasets: [{
//             // ⑤dataset의 이름(String)
//             label: '# of Votes',
//             // ⑥dataset값(Array)
//             data: [12, 19, 3, 5, 2, 3],
//             // ⑦dataset의 배경색(rgba값을 String으로 표현)
//             backgroundColor: 'rgba(255, 99, 132, 0.2)',
//             // ⑧dataset의 선 색(rgba값을 String으로 표현)
//             borderColor: 'rgba(255, 99, 132, 1)',
//             // ⑨dataset의 선 두께(Number)
//             borderWidth: 1
//         }]
//     },
//     // ⑩차트의 설정(Object)
//     options: {
//         // ⑪축에 관한 설정(Object)
//         scales: {
//             // ⑫y축에 대한 설정(Object)
//             y: {
//                 // ⑬시작을 0부터 하게끔 설정(최소값이 0보다 크더라도)(boolean)
//                 beginAtZero: true
//             }
//         }
//     }
// });