728x90
회사에서 판매하는 솔루션에 보고서 형식의 웹페이지가 필요하게 되었다.
내가 만들게 되었고, 무료로 사용할 수 있는 차트라이브러리 중 가장 깔끔한 chartJS를 사용해 만들어보게 되었다.
1. 기본적인 차트 만들기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- 라이브러리 추가 상단에 작성하여 chartjs 라이브러리를 불러올 수 있게 한다. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<div>
<!-- chart 캔버스 body의 div를 하나 만들고, 안에 canvas를 통해 chart를 불러온다 id값은 임의 설정.--> <canvas id="chart1"></canvas>
</div>
</body>
<!-- [3] chart 작성 -->
<script>
//document.getElementById를 통해 canvas의 ID를 가져오고, new Chart로 생성한다. new Chart(document.getElementById("chart1"), {
//'bar'는 막대 모양의 차트이며, 'line', 'horizontalBar', 'doughnut', 'pie' 등의 다양한 종류가 있다. type: 'bar',
data: {
//labels은 데이터의 이름을 지정해주고 labels의 개수만큼 데이터를 그릴 수 있다. labels: ['1', '2', '3', '4', '5'],
datasets: [{
label: "데이터",
//data의 값을 적어준다. 숫자인 변수도 넣을 수 있다. data: [
1,
2,
3,
4,
5
],
//테두리 색깔을 지정해준다. borderColor: "yellow",
//차트 색깔을 지정해준다. backgroundColor: "tomato",
}]
},
options: {
//브라우저 크기에 맞추어 반응하게 하는 설정 responsive: true,
//차트 상단에 표시될 타이틀을 설정 title: {
display: true,
text: '막대 차트'
},
//마우스를 차트 범위 근처에 대면 값을 표시해주도록 하는 설정 hover: {
mode: 'nearest',
intersect: true
},
scales: {
//x축을 설정한다 xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'x축'
},
}],
//y축을 설정한다 yAxes: [{
display: true,
ticks: {
suggestedMin: 0,
},
scaleLabel: {
display: true,
labelString: 'y축'
}
}]
}
}
});
</script>
</html>
|
cs |
위와 같이 가장 기본적인 막대차트가 완성되었다.
고칠점이나 지적할 사항, 문의사항은 언제든지 댓글 부탁드립니다.
'프로그래밍 언어 > JAVASCRIPT' 카테고리의 다른 글
| [GEMINI] GEMINI API 웹페이지에 이식하기 (0) | 2024.02.20 |
|---|---|
| [JAVASCRIPT] 이메일 검증 (0) | 2024.02.08 |
| [JAVASCRIPT] 윈도우 스크롤 위치 (0) | 2020.12.11 |
| [JAVASCRIPT] ES5 -> ES6 바뀐 함수 사용법 (0) | 2020.12.10 |
| [JAVASCRIPT] reduce를 이용한 배열 내 최대값 최소값 (0) | 2020.12.09 |