자바스크립트 차트 사용하기(chart js) :: 개발/일상_Mr.lee

자바스크립트 차트 사용하기(chart js)

Posted by Mr.mandu.
2018. 3. 19. 10:49 개발/javascript,jquery

안녕하세요.

오랜만에 포스팅을 하게되었습니다.

일이 바빠 포스팅에 소홀했네요...

그만큼 제가 공부를 더 안했다고 볼수도 있겠군요.


웹상에 차트를 사용할 일이 생겨 포스팅을 하게 되었습니다.

차트중에서 유명한 구글 차트도 있지만


저는 막대 그래프와 선 그래프를 동시에 사용하기위하여

chart js 를 선택하였습니다.




바로 이런 모습으로 사용됩니다.


chart js의 주소 입니다.

http://www.chartjs.org/


그리고 샘플 소스를 다운 받을 수 있습니다.

제가 받았던 링크도 공유하겠습니다.

https://www.jsdelivr.com/package/npm/chart.js?path=dist




기본적인 사용방법은 간단합니다.

세부적으로 컨트롤 하는 것들은 구글링이나 홈페이지를 참고하세요.

기본적인 차트 만드는 소스 입니다.


사용하게 쉽게 샘플 전체 소스를 공유하겠습니다.

위의 그림의 소스 입니다.






	Labelling Data Points
	
	
	



	


html body 부분에는 cnavas를 선언하고

대부분의 것들은 스크립트 단에서 컨트롤 하고있습니다.

그래프를 변형하여 사용하실 분들은 API를 참고하세요.

혹시나 제가 도움이 될부분이 있다면 도와드리겠습니다.

댓글 남겨주세요.

감사합니다.