안녕하세요
이번 포스팅은 Chart.js를 사용하는 내용을 다뤄보겠습니다.
Chart JS 홈페이지 : www.chartjs.org/
(1) 사용 준비
- 1. CDN
Chart JS를 사용하기 위해서는 다운받거나 jQuery처럼 CDN을 붙여야 합니다.
△△△ 위 사이트에서 CDN을 복사해서 붙여넣을 수 있는데요
하지만 이걸 여러번 붙여야하니 귀찮을 따름입니다.
어떤 분이 하나만 붙여서 CDN을 사용하던데 좋아보이더라구요.
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>위의 소스를 붙였습니다.
실행이 잘 되더라구요 :)
- 2. 다운로드(npm)
저는 npm을 이용해서 다운받았습니다.
npm이란 Node Package Manager 의 줄임말인데요.
nvm을 설치하면 npm 명령어를 사용할 수 있습니다.
[React Native] 리액트 네이티브 설치(nvm, node.js, jdk, react native cli, visual studio code)
설치 리스트 NVM(Node Version Manager) node.js npm(Node Package Manager) Android Studio JAVA (JDK) Visual Studio Code React Native CLI chocolatey 1. NVM (Node Version Manager) OS의 특정 버전 node.js..
drcode-devblog.tistory.com
△△△ 위의 글을 참고하면 nvm 다운로드를 할 수 있습니다.
nvm을 다운받고서
npm install chart.js --save 를 Visual Studio Code나 window PowerShell, cmd 같은 곳에 입력하시면 됩니다.
저는 html 파일을 js 파일들이 있는 곳에 같이 놓아서 스크립트 불러오기가 편했습니다
<head>
<script src="Chart.bundle.js"></script>
<script src="Chart.bundle.min.js"></script>
<!-- <script src="Chart.css"></script> -->
<script src="Chart.js"></script>
<!-- <script src="Chart.min.css"></script> -->
<script src="Chart.min.js"></script>
</head>
다음에는 Chart JS를 활용하여 그래프를 그려보도록 하겠습니다
'javascript, jQuery > API' 카테고리의 다른 글
| [API/javascript] 구글 차트 API - jstl 데이터 필터링 (0) | 2021.04.13 |
|---|---|
| [javascript_api] geolocation으로 받은 위도,경도로 지도에 표시하기 (2) | 2020.11.26 |
| [javascript_api] geolocation을 이용해 현재 IP주소로 위도, 경도값 받기 (0) | 2020.11.25 |
댓글