자바스크립트 차트 사용하기(chart js)
안녕하세요.
오랜만에 포스팅을 하게되었습니다.
일이 바빠 포스팅에 소홀했네요...
그만큼 제가 공부를 더 안했다고 볼수도 있겠군요.
웹상에 차트를 사용할 일이 생겨 포스팅을 하게 되었습니다.
차트중에서 유명한 구글 차트도 있지만
저는 막대 그래프와 선 그래프를 동시에 사용하기위하여
chart js 를 선택하였습니다.
바로 이런 모습으로 사용됩니다.
chart js의 주소 입니다.
그리고 샘플 소스를 다운 받을 수 있습니다.
제가 받았던 링크도 공유하겠습니다.
https://www.jsdelivr.com/package/npm/chart.js?path=dist
기본적인 사용방법은 간단합니다.
세부적으로 컨트롤 하는 것들은 구글링이나 홈페이지를 참고하세요.
기본적인 차트 만드는 소스 입니다.
사용하게 쉽게 샘플 전체 소스를 공유하겠습니다.
위의 그림의 소스 입니다.
Labelling Data Points
html body 부분에는 cnavas를 선언하고
대부분의 것들은 스크립트 단에서 컨트롤 하고있습니다.
그래프를 변형하여 사용하실 분들은 API를 참고하세요.
혹시나 제가 도움이 될부분이 있다면 도와드리겠습니다.
댓글 남겨주세요.
감사합니다.
'개발 > javascript,jquery' 카테고리의 다른 글
| [자바스크립트, 제이쿼리]앞머리, 특정 단어로 시작하는 객체 select (1) | 2018.08.23 |
|---|---|
| 자바스크립트(javascript) replaceall (0) | 2018.04.29 |
| jquery radio check, form:checkbox 체크하기 (2) | 2018.03.23 |
| javascript setInterval, setTimeout 몇 초후 실행, 몇초마다 실행 (0) | 2017.09.09 |
| attr과 prop의 차이 적어두기! (0) | 2017.08.10 |
| javascript Ajax 사용 방법 (0) | 2017.03.10 |
| 스마트 에디터 이벤트 생성, 키이벤트 (0) | 2016.09.05 |