Chart.js
특징
. 깔끔하고 보기좋음.
. html5 기반. (canvas 사용, IE9 이상)
. 6가지 타입 제공 (Line, Bar, Radar, Pola area, Pie, Doughnut)
. 애니메이션 제공
. http://www.chartjs.org/
Downloadlink : https://github.com/nnnick/Chart.js
Line 타입사용법.
Data structure
var data = { labels : ["January","February","March","April","May","June","July"], datasets : [ { fillColor : "rgba(220,220,220,0.5)", strokeColor : "rgba(220,220,220,1)", pointColor : "rgba(220,220,220,1)", pointStrokeColor : "#fff", data : [65,59,90,81,56,55,40] }, { fillColor : "rgba(151,187,205,0.5)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", data : [28,48,40,19,96,27,100] } ] }
.label : x축 라벨
.datasets
- fillColor : 면적 색
- strokeColor : 줄 색
- pointColor : 포인트 색
- pointStrokeColor : 포인트 테두리 색
- data : x축에 대응되는 Y값
- fillColor : 면적 색
- strokeColor : 줄 색
- pointColor : 포인트 색
- pointStrokeColor : 포인트 테두리 색
- data : x축에 대응되는 Y값
datasets이 두개인 이유는 한 차트에 두 데이터를 모두 표시하기 위함.
호출 방법
<canvas id="myChart" width="400" height="400"></canvas>//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Line(data,option);
option도 Data 처럼 별도로 변수를 만들어 주어야 함.
그런데 default 설정이 괜찮아서 그냥 써도 무방할듯.
Chart(ctx).Line(data); // default 호출
그런데 default 설정이 괜찮아서 그냥 써도 무방할듯.
Chart(ctx).Line(data); // default 호출
Chart options
var option = { //Boolean - If we show the scale above the chart data scaleOverlay : false, //Boolean - If we want to override with a hard coded scale scaleOverride....대략 20가지 정도 되는듯..}
Browser support
html5 <canvas> 태그를 사용하기 때문에 IE8 이하에서는 제대로 동작하지 않는다.
excanvas.js 를 별도로 설치
Browser support for the canvas element is available in all modern & major mobile browsers (caniuse.com/canvas).
For IE8 & below, I would recommend using the polyfill ExplorerCanvas - available at https://code.google.com/p/explorercanvas/. It falls back to Internet explorer's format VML when canvas support is not available. Example use:
<head>
<!--[if lte IE 8]>
<script src="excanvas.js"></script>
<![endif]-->
</head>
Usually I would recommend feature detection to choose whether or not to load a polyfill, rather than IE conditional comments, however in this case, VML is a Microsoft proprietary format, so it will only work in IE.
Some important points to note in my experience using ExplorerCanvas as a fallback.
댓글
댓글 쓰기