자바스크립트:차트 종류별 예제 및 설명(Javascript: Chart.js Sample & Description)
차트를 만드는 자바스크립트 오픈 소스를 찾아봤을 때 svg 로 그리는 방식과 canvas 로 그리는 방식 두 가지로 나는 것으로 확인되었다.
두 방식의 차이는 svg 는 벡터 오브젝트 관점에서 본다는 것과 canvas 는 픽셀 관점에서 본다는 점이다.
그리하여 svg는 어플리케이션에서 자주 사용이 되고, cavas의 경우 게임같은 고성능 2D 그래픽에 많이 사용된다.
다시 내용으로 돌아가서 제가 생각을 했을 때는 svg 기반의 차트보다는 canvas 기반의 차트가 많은 데이터를 차트로 표현할 시에 성능상 유리할 것으로 예상되고, 또 확인해본결과 안드로이드에서는 아직 svg 지원이 안되는 것으로 알고 있다.(canvas 는 지원됨)
위 내용으로 canvas 기반의 차트로 구현을 하는 것이 더 좋을 것이라 생각된다.
이번에 소개하려는 오픈 소스는 Canvas를 이용하여 차트를 그리는 방식이다.
1. Getting started
var ctx = document.getElementById("canvas").getContext("2d");
위 부분은 canvas 를 2d 용으로 사용하겠다고 선언하는 부분이다. getContext() 에서 파라미터로 다른 값이 있는 지 궁금하신 분은 아래 링크를 참고 하시면 되겠습니다.
[MDN Site: HTMLCanvasElement.getContext]
차트에서 공통적인 옵션값 중 콜백 함수 2개가 있습니다. 그것은 다음과 같습니다.
{
onAnimationProgress: function() {
//차트가 그려지는 동안 반복적으로 호출되는 콜백 함수
//기본 옵션에서 animation: false 로 할 경우 호출되지 않음.
},
onAnimationComplete: function() {
//차트가 그려지는 것이 완료될 경우 호출되는 콜백 함수
//기본 옵션에서 animation: false 로 설정을 하여도 차트가 완성되면 호출됨.
//위 내용으로 봤을 때 차트가 완성된 후 처리해야할 로직을 여기서 구현하면됨.
}
}
위 내용 이외에 옵션값에 대해서는 아래 링크를 참조 하시면 되겠습니다.
[Chart.js Site: Global chart configuration]
2. Line Chart Options
{
///Boolean - 차트 눈금 표시 여부 설정
scaleShowGridLines : true,
//String - 차트 눈금 색 설정
scaleGridLineColor : "rgba(0,0,0,0.05)",
//Number - 차트 눈금 선 굵기 설정
scaleGridLineWidth : 1,
//Boolean - 차트 선이 꺽이는 부분을 곡선 처리 여부 설정
bezierCurve : true,
//Number - 차트 선의 곡선의 정도 설정
bezierCurveTension : 0.4,
//Boolean - 차트 선의 데이터 부분 점 표시 여부 설정
pointDot : true,
//Number - 차트 선의 데이터 부분 점 크기 설정
pointDotRadius : 4,
//Number - 차트 선의 데이터 부분 점 테두리 너비 설정
pointDotStrokeWidth : 1,
//Number - 차트 선의 데이터 부분 팝업 노출 범위 설정
pointHitDetectionRadius : 20,
//Boolean - Whether to show a stroke for datasets
datasetStroke : true,
//Number - 차트 선의 너비 설정
datasetStrokeWidth : 2,
//Boolean - 차트에서 선만 노출 여부 설정
datasetFill : true,
//String - A legend template
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
};
3. Bar Chart Options
{
//Boolean - 차트 x축 시작값을 0 으로 여부 설정
scaleBeginAtZero : true,
//Boolean - 차트 눈금 표시 여부 설정
scaleShowGridLines : true,
//String - 차트 눈금 색 설정
scaleGridLineColor : "rgba(0,0,0,0.05)",
//Number - 차트 눈금 선 굵기 설정
scaleGridLineWidth : 1,
//Boolean - 차트에서 표출되는 막대들의 테두리 표출 여부 설정
barShowStroke : true,
//Number - 차트에서 표출되는 막대들의 테두리 너비 설정
barStrokeWidth : 2,
//Number - 차트 x축 수치 간격 설정
barValueSpacing : 5,
//Number - 차트에서 표출되는 막대들의 간격 설정
barDatasetSpacing : 1,
//String - A legend template
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
};
4. Radar Chart Options
{
//Boolean - 차트 횡 눈금 표시 여부 설정
scaleShowLine : true,
//Boolean - 차트 종 눈금 표시 여부 설정
angleShowLineOut : true,
//Boolean - 차트 눈금 수치 값 표시 여부 설정
scaleShowLabels : false,
// Boolean - 차트 종 눈금 시작 값 0 으로 여부 설정
scaleBeginAtZero : true,
//String - 차트 종 눈금 색 설정
angleLineColor : "rgba(0,0,0,0.1)",
//Number - 차트 종 눈금 너비 설정
angleLineWidth : 1,
//String - 글씨 폰트 설정
pointLabelFontFamily : "'Arial'",
//String - 글씨 스타일 설정
pointLabelFontStyle : "normal",
//Number - 글씨 크기 설정
pointLabelFontSize : 10,
//String - 글씨 색 설정
pointLabelFontColor : "#666",
//Boolean - 차트 데이터 부분 점 표출 여부 설정
pointDot : true,
//Number - 차트 데이터 부분 점 크기 설정
pointDotRadius : 3,
//Number - 차트 데이터 부분 점 테두리 너비 설정
pointDotStrokeWidth : 1,
//Number - 차트 데이터 부분 팝업 노출 범위 설정
pointHitDetectionRadius : 20,
//Boolean - Whether to show a stroke for datasets
datasetStroke : true,
//Number - 차트 선 굵기 설정
datasetStrokeWidth : 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill : true,
//String - A legend template
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
};
5. Polar Area / Pie / Doughnut Chart Options
{
//Boolean - 수치 라벨 배경 표출 여부 설정
scaleShowLabelBackdrop : true,
//String - 수치 라벨 배경 색 설정
scaleBackdropColor : "rgba(255,255,255,0.75)",
// Boolean - 차트 종 눈금 시작 값 0 으로 여부 설정
scaleBeginAtZero : true,
//Number - 수치 라벨 Y 패딩 값 설정
scaleBackdropPaddingY : 2,
//Number - 수치 라벨 X 패딩 값 설정
scaleBackdropPaddingX : 2,
//Boolean - 눈금 표시 여부 설정
scaleShowLine : true,
//Boolean - 차트 값 테두리 표출 여부 설정
segmentShowStroke : true,
//String - 차트 값 테두리 색 설정
segmentStrokeColor : "#fff",
//Number - 차트 값 테두리 너비 설정
segmentStrokeWidth : 2,
//Number - 애니메이션 속도 설정(값이 높을 수록 느려짐)
animationSteps : 100,
//String - Animation easing effect.
animationEasing : "easeOutBounce",
//Boolean - 애니메이션 표출 여부 설정
animateRotate : true,
//Boolean - 효과가 좀 더 큰 애니메이션 여부 설정
animateScale : false,
//String - A legend template
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
}
6. Extends Chart types
[Site: StackedBar Chart]
[Site: Line-Bar Chart]
작성된 내용보다 더 자세한 내용은 [Site: Chart.js] 에서 확인 가능 합니다.
차트 샘플 소스
Chartjs-sample.zip
