1. 예제를 따라할 폴더 만들기
C:\2023\Coding\JavaScript\Chart Example
2. Editor(ex. Visual Studio Code, Vim etc.)에서 작업준비하기
따라하기쉽게 Visual Studio Code Editor를 사용하시는걸 권장합니다.
우선, 그림처럼 기본폴더(CSS, data, js)와 원하는 파일명으로 html 파일을 생성해줍니다.
index.html에서 !를 입력하면 그림1과 같이 자동완성이 뜨고, Enter를 적용하면 그림2처럼 html 기본 양식이 만들어 집니다.
3. html, js 파일 작성하기
Chart.js 라이브러리를 제공하는 공식 홈페이지를 참고해 코드를 작성해보겠습니다.
https://www.chartjs.org/docs/latest/getting-started/
Getting Started | Chart.js
Getting Started Let's get started with Chart.js! Alternatively, see the example below or check samples. Create a Chart In this example, we create a bar chart for a single dataset and render it on an HTML page. Add this code snippet to your page: You should
www.chartjs.org
공식 홈페이지에 많은 예제들이 있지만, 초보자인 우리는 Getting Started Tab의 예제를 실습해보겠습니다.
링크를 타고 들어가 예제를 복사해 왔습니다.
아래 예제로 코드를 작성했을때 그림3과 같은 차트를 그릴 수 있습니다.
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
두가지 코드 스타일로 차트 예제를 완성해보겠습니다.
1. html 파일 하나만 쓰는 경우
처음 html 파일 생성시 기본 양식에서 <body></body> 사이에 예제 코드를 넣으면 위 그림3과 같은 차트를 그릴 수 있습니다.
2. html, js 두 파일을 쓰는 경우
js 폴더에 원하는 이름으로 js 파일을 만들어주었습니다.(필자는 chartjs.js)
그다음, html 파일에 js 파일을 불러오는 코드를 작성하고, js파일에 예제코드를 작성했습니다.
그러면 위 그림3과 같은 차트를 그릴 수 있습니다.
파일을 분할하는 이유에는 여러가지가 있지만 기본적으로 얻는 이점은 아래와 같습니다.
1) 모듈화 프로그램하기 쉽다.
2) 코드 수정, 확장이 쉽다.
3) 컴파일 시간이 줄어든다.
따라서, 간단한 예제더라도 파일을 분할해서 작성하는 연습을 하는 습관을 기르는 것이 좋습니다.
JavaScript 라이브러리를 사용하여 간단한 차트 예제를 해보았습니다.
잘 따라오셨다면 직접 HTML, JavaScript 코드를 작성했을거고, 라이브러리 사용법도 익히셨을 겁니다.
궁금한 점이 있으시면 댓글로 질문해주세요.
다음은 Visual Studio Code 설치방법과 더 유용하게 사용하는 법 그리고 지루하지만 꼭 알아야할 JavaScript 문법에 대해 알아보겠습니다.
'프로그래밍' 카테고리의 다른 글
| 머신러닝 시작하기(1) - 인공지능과 머신러닝 (0) | 2023.03.18 |
|---|---|
| JavaScript 시작하기(1) (0) | 2023.03.11 |
| Python 기본 문법 - 파이썬 시작하기(1) (0) | 2023.03.02 |
| AI, 머신러닝, 딥러닝 ? (0) | 2023.02.27 |
| 프로그래밍/코딩 시작하기 - 코딩 입문자 (0) | 2023.02.25 |
댓글