메뉴 보이기
Profile
이온디

2017.03.29

차트

Chart.js

조회 수 450 추천 수 0

Amchart, 구글 차트, 하이차트 등 예쁘고 사용하기 간편한 차트 라이브러리가 있습니다.
그 중에서도 Chart.js 를 소개합니다.

20170329.png

http://fun.eond.com/misc/client20170329/Chart.js/samples/charts/area/basic.html

위 차트는 아래와 같은 설정 작업이 필요합니다.

1. 가로선 없앰
2. 세로선 없앰
3. 좌측 라벨 없앰
4. 타이틀 안보이게 처리 (없앨 경우 45라는 글자가 잘림, x타이틀 없앨 경우 도 잘림)
5. 점 위에 텍스트 표시

매뉴얼

http://www.chartjs.org/docs/#line-chart-chart-options

다양한 예제

http://jsfiddle.net/uh9vw0ao/

http://codepen.io/eond/pen/qrJYjP

참조

http://stackoverflow.com/questions/31631354/how-to-display-data-values-on-chart-js

Profile
8
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

Profile
에디터
번호 제목 글쓴이 날짜 조회 수
공지 [팁] 자바스크립트 관련 유용한 링크 모음집 (러닝은빛) profile 이온디 2015.08.27 402
공지 자바스크립트 추천 사이트 1 profile 이온디 2015.08.06 318
75 [팁] 정규식 테스트 사이트 모음 profile 이온디 2019.11.12 16
74 [팁] offset().top 오류 profile 이온디 2019.04.27 418
73 [팁] 프레임셋 안에서 주소창 주소변경하기 profile 이온디 2019.04.06 98
72 [라이브러리] 제이쿼리 패럴랙스 profile 이온디 2018.07.17 35
71 [팁] animation json lottie profile 이온디 2018.03.28 27
70 [editor] Froala Editor profile 이온디 2017.10.22 35
69 [팁] 얇은 스크롤바 profile 이온디 2017.10.11 71
68 [팁] li 더블클릭 편집 profile 이온디 2017.09.12 32
67 [팁] 핫키 소스 profile 이온디 2017.06.29 40
66 [기초] 자바스크립트 innerHTML 을 이용한 H1~H5 자동입력 profile 이온디 2017.05.17 48
[차트] Chart.js profile 이온디 2017.03.29 450
64 [라이브러리] 가격 범위 슬라이더 스크립트(1) - Ion.RangeSlider profile 이온디 2017.01.02 203
63 [라이브러리] parallax.js 패럴럭스 스크립트 profile 이온디 2016.07.18 0
62 [팁] 자바스크립트 카운터 및 가격 계산 profile 이온디 2016.07.03 1580
61 [라이브러리] 자바스크립트 로딩바 progressbar.js profile 이온디 2016.06.17 100
60 [라이브러리] 자바스크립트 로딩바 nprogress profile 이온디 2016.06.17 113
59 [라이브러리] 자바스크립트 프로그레스바 page.js profile 이온디 2016.06.17 90
58 [고급팁] Javascript 바보들을 위한 Promise 강의 - 도대체 promise는 어떻게 쓰는 거야? profile 이온디 2016.06.10 96
57 [고급팁] 동기와 비동기 프로그래밍 profile 이온디 2016.06.10 44
56 [고급팁] Javascript 비동기 프로그래밍 profile 이온디 2016.06.10 103