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
// }
// }
// }
// });'Stack > JavaScript' 카테고리의 다른 글
| [JS] fusionChart (1) | 2022.09.01 |
|---|---|
| [JS] 2022 데브매칭 상반기 - 프로그래밍 언어 검색 (0) | 2022.08.22 |
| [JS] 생성자 함수 복습 (0) | 2022.08.22 |
| [JS] Promise / Async / 에러 핸들링 복습 (0) | 2022.06.30 |
| [JS] Wave (0) | 2022.06.20 |