AXBOOT Chart.js 사용(2/2)

 

▶ 참고 사항

 

[ chart.js와 chartist.js 의 차이 ]

 

• chart.js

HTML canvas 요소 기반

활성화, 접근성, 동적 데이터 셋 수정 시 유용

but, 차트 구조의 캡슐화로 사용자가 독자적으로 정의 하기 힘들고 유연성이 떨어짐

 

• chartist.js

HTML5 인라인 SVG 기반

많은 API 호출시 유리, 미디어쿼리 문자열 지원 및 사용자 정의 가능

but, 활성화 정도가 낮고 동적 데이터 셋 수정 시 불편

 

 

[ CANVAS 와 SVG 의 차이 ]

	Canvas	SVG
그래픽 시스템	픽셀 기반의 즉시 모드 그래픽 시스템	모양 기반의 유지 모드 그래픽 시스템
이미지 처리방식	Bitmap ( 해상도 의존적 )	Vector ( 해상도 독립적 )
DOM	존재하지 않음 ( DOM Control 불가 )	존재함( Script로 Control 가능 )
외부 이미지 편집	Bitmap image 편집 용이	Vector image 편집 용이
성능저하 요인	높은 해상도의 이미지를 사용할 경우	이미지가 복잡해질 경우
Animation	Animation API가 없으므로 Script Timer를 사용	높은 수준의 Animation 지원
외부이미지로 저장	jpg, png 등으로 저장 가능	불가능
적합한 서비스	graph 구현, game, 실시간 데이터 출력, 동영상 조작	graph 구현, 메우 세밀한 해상도를 지원하는 UI 및 Application
적합하지 않은 서비스	Standalone Application UI	game, 실시간 데이터 출력

(출처 - http://www.nextree.co.kr/p9307/)

---

▶ chartist. js 사용 시 chart 구현 방법

 

 

▶chart.js 사용 시 chart 구현 방법

 

1.