오픈소스인 chartJS를 이용하여 차트를 표현해보려고 합니다!
jsfiddle 은 html과 css, javascript를 웹에서 작성해서 바로 테스트할 수 있는 사이트입니다!
※ 유사한 사이트로는 https://codepen.io/pen/
: 여러 오픈소스들이 많이 존재합니다.
로그인을 하지 않고도 사용이 가능하며, 따로 소스를 저장하거나 공유하는 기능을 사용하기 위해서는
회원가입 후 사용하시면 됩니다!
좌측 상단의 HTML 영역에는 <html> 이나 <head>, <body>태그를 생략한채 <body>태그 내에 들어갈 코드만 입력하면 됩니다.
우측 상단의 css입력창에는 css코드를 입력하고
좌측 하단의 js입력창에는 <script>태그를 제외한 스크립트 코드를 작성하면 됩니다!
덧붙여 JAVASCRIPT 창 제일 우측상단의 톱니바퀴를 클릭하여 jquery를 적용할 수 있고,
External Resources 에 CDN을 입력하여 외부 라이브러리를 사용 할 수 있습니다!
1) chartJS를 사용하기 위해 다음의 CDN주소를 넣어주세요!
Run버튼을 누르면 입력한 코드가 result창에 출력이 됩니다.
2) 차트를 작성하려면 Chart 클래스를 인스턴스시켜주고, 그 이전에 차트를 그릴 캔버스 노드를 삽입 후 jQuery 인스턴스 또는 2D 컨텍스트를 전달해야합니다.
html영역에 <canvas id="myChart"></canvas>를 입력하고
js영역에
var ctx = document.getElementById("myChart").getContext("2d");
또는
var ctx = document.getElementById("myChart");
또는
var ctx = $("#myChart");
를 입력하여 ctx 변수에 캔버스 노드를 담습니다!
준비는 거의 다 되었습니다.
간단한 막대차트를 만들어봅시다.
chartJS의 차트 유형에는 크게 막대, 라인, 파이, 도넛 등등이 있습니다.
3) type에 ‘bar’, ‘line’, ‘radar’, ‘pie’, ‘doughnut’, ‘polarArea’, ‘bubble’ 등 해당하는 단어를 넣어주면 쉽게 차트 유형을 변경할 수 있습니다!
▲ type:'bar' 일 때 막대 차트
▲ type:'line' 일 때 라인 차트
▲ type:'radar' 일 때
data에는 차트에 필요한 x축 데이터와 y축 데이터 및 해당 라벨 정보를 담고 있는 객체를 넣습니다.
4) data내의 labels는 x축 데이터의 라벨을 의미하며, datasets은 범례 하나에 해당하는 정보집합을 의미합니다.
labels엔 배열형태로 값이 들어가며, 입력된 순서대로 좌측에서부터 우측으로 나열됩니다.
black을 한번 추가해보면?
x축에 black이 추가되었음을 확인 할 수 있습니다!
(막대가 없는 이유는 값이 들어가지 않았기 때문입니다)
5) datasets은 배열로 이루어져 있어, 배열 안의 label, data등을 포함한 객체 하나가 하나의 범례(데이터)를 표현합니다.
위 예제는 두개의 객체가 들어가있으며
첫번째 객체는 label과 실제 값을 나타내는 data, 배경색, 선색이 정의되어있고,
두번째 객체는 label과 data 뿐입니다.
예제를 실행한 결과 하나의 x label에 각각 두개씩 범례가 표현되었습니다!
배경색과 선색을 지정한 첫번째 범례와 label과 값만 설정한 두번째 범례의 차이 느껴지시나요
6) 빨간 테두리는 배경색을, 파란테두리는 선색을 지정했었기 때문에 두 범례가 확연히 차이가 납니다 !
즉, 하나의 범례 data엔 각기 다른 배경색(backgroundColor)과 선색(borderColor)을 추가로 지정할 수 있습니다.
필수 값은 아니며, 생략시 default로 ‘rgba(0, 0, 0, 0.1)’이 적용됩니다.
7) options 에서는 차트 애니메이션과 레이아웃, 범례, 차트제목, 툴팁 등 차트를 구성하는 요소들에 대한 부가적인 설정을 할 수 있습니다!
예를들어 차트 제목을 표현하고 싶다면 title을 삽입하면 됩니다~!
차트제목에 대해서도 여러 설정들이 존재하는데요
그중 대표적인 건 뭐니뭐니해도 보여줄껀지 말껀지와 제목 글입니다!
차트제목은 display 설정의 기본값이 false여서 text만 정의하는 경우 표시되지 않으니 반드시 true로 설정해줍니다.
text에는 차트 제목을 입력해주시면 됩니다.
그 외 차트제목의 부가 옵션입니다.
그 외, 제목 폰트 크기, 색상, 여백 등을 설정할 수 있습니다~!
position의 옵션은 top, left, bottom, right 로 제목이 위치할 곳을 지정만 해주면 해당 위치에 제목이 표시됩니다~!
8) 범례 역시 options에 legend라는 속성을 추가하여 세세한 설정이 가능합니다.
차트제목(title)과는 다르게 범례는 display 기본값이 true입니다!
즉 생략하여도 범례는 표시됩니다
범례 역시 폰트 컬러, 사이즈, 스타일, 위치 등등을 지정할 수 있고
범례내용은 이미 datasets에서 label로 지정해주었기 때문에 따로 입력해주실 필요는 없습니다!
범례에 해당하는 옵션들입니다~!
chartJS 에 대해서 더 많은 걸 알고 싶으시면 해당 chartjs 사이트를 참고해주세요!
'웹개발 > 프론트관련' 카테고리의 다른 글
| [외부 JS] 달력 관련 JS (Fullcalendar) (0) | 2018.08.05 |
|---|---|
| [JSP] 나만의 커스텀 태그 만들어 효율적인 작업을 하자 (1) | 2018.06.10 |
| [Javascript] 자바스크립트의 빈값 체크 (+숫자, 배열도 한꺼번에) (1) | 2018.06.09 |
| [JavaScript] 배열 다루기 (map, reduce, filter 등) (0) | 2018.05.29 |
| [Ajax] AJAX 데이터 간단한 한글처리 (produces) (0) | 2018.05.22 |
