chart.js

Chart.js


특징

 . 깔끔하고 보기좋음.
 . html5 기반. (canvas 사용, IE9 이상)
 . 6가지 타입 제공 (Line, Bar, Radar, Pola area, Pie, Doughnut)
 . 애니메이션 제공
 . http://www.chartjs.org/




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값

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 호출

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.

댓글

이 블로그의 인기 게시물

[spring] log4j 설정 및 사용법

[linux] 백그라운드 작업 nohup [xxx.sh] &

[spring] 인터셉터 와 필터