chart.js란?

HTML5 캔버스를 사용하여 플랫 그래프를 쉽게 만들 수있는 자바 스크립트 라이브러리.
입문 기사는 Qiita내에도 이미 투고가 있으므로 할애합니다.

이 기사의 목적

완성 이미지

위 그림과 같은 그래프를 클릭하면 해당 부분의 상세가 표시되는 기능을 상정하고 그래프 클릭으로 선택할 수 있도록 확장한다.

이번에 할 일

선택한 축을 강조 표시 할 수 있도록 라이브러리를 확장합니다 (위 그림의 빨간색 선은 표준 기능이 아닙니다)

클릭 이벤트 처리기 만들기

해봤어

소개

Chart.js를 확장하는 방법은 다음 두 가지가 있습니다.
1. Chart.js를 직접 편집
2. src/Chart.Core.js나 src/Chart.Line.js와 같은 소스 파일을 편집하고 동봉된 gulpfile.js로 빌드한다.
(gulp 설치 필요 ※ 필요 npm)

여러가지 확장해 가거나, 제대로 구성 관리한다면 후자가 추천입니다만, 이번은 전자로 설명해 갑니다.

덧붙여 설명에 있어서는 집필 시점에서의 최신판인 Chart.js Version: 1.0.2 를 사용합니다.
버전 업으로 행수등은 미묘하게 어긋난다고 생각합니다만, 양해 바랍니다.

chart.js 확장

옵션의 추가 개소로서는, 56행째 부근의 모든 그래프 공통의 옵션 항목과, 각 그래프종별의 옵션 항목의 어느 쪽인가가 됩니다.
이번에는 선 그래프에만 추가해 보았습니다.
(원 그래프라든지 레이더 차트라고 생각이 다르기 때문에)

Chart.js

2531        //Boolean - Whether to show vertical lines (except Y axis)
2532        scaleShowVerticalLines: true,
+
+           //Boolean - Whether to highlight selected vertical line
+           scaleHighlightVerticalLine: false,
+
+           //String - Colour of the highlighted line
+           scaleHighlightLineColor: "rgba(176,0,0,1)",
+   
+           //Number - Width of the highlighted line
+           scaleHighlightLineWidth: 2,
2533
2534        //Boolean - Whether the line is curved between points
2535        bezierCurve : true,

위에서 순서대로 강조 표시를 할지 여부, 강조 색상, 선 너비의 기본값입니다.

그리고 위에서 추가한 옵션을 눈금선 그릴 때 사용할 수 있도록 해 갑니다.

Chart.js

2711                gridLineColor: (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
+                   highlightVerticalLine: this.options.scaleHighlightVerticalLine,
+                   highlightLineColor: this.options.scaleHighlightLineColor,
+                   highlightLineWidth: this.options.scaleHighlightLineWidth,
2713                padding: (this.options.showScale) ? 0 : this.options.pointDotRadius + this.options.pointDotStrokeWidth,

그리고 세로 그리드 선을 그릴 때 선택한 축의 경우 강조 표시하는 코드를 추가합니다.

Chart.js

+                       if (this.highlightVerticalLine && index == this.selectedIndex) {
+                           ctx.lineWidth = this.highlightLineWidth;
+                           ctx.strokeStyle = this.highlightLineColor;
+                       }
+   
1691                    if (drawVerticalLine) {
1692                        ctx.moveTo(linePos, this.endPoint);
1693                        ctx.lineTo(linePos, this.startPoint - 3);
1694                        ctx.stroke();
1695                        ctx.closePath();
1696                    }

그러면 scaleHighlightVerticalLine 옵션이 true이고 선택한 축에서 강조색이 됩니다.
그런 다음 선택한 축을 설정하는 이벤트 핸들러를 만듭니다.

이벤트 핸들러 작성

Chart.js와 함께 제공되는 samples 폴더의 line.html을 사용하여 설명합니다.
44행 이후의 Javascript를 변경합니다.

line.html

44      window.onload = function(){
45          var ctx = document.getElementById("canvas").getContext("2d");
+           helpers = Chart.helpers;
46          window.myLine = new Chart(ctx).Line(lineChartData, {
+-47            responsive: true,
+               scaleHighlightVerticalLine: true
48          });
+           helpers.addEvent(canvas, 'mousemove', function (evt) {
+                var points = myLine.getPointsAtEvent(evt);
+                if (points.length > 0) {
+                    canvas.style.cursor = "pointer";
+                } else {
+                    canvas.style.cursor = "default";
+                }
+            });
+            helpers.addEvent(canvas, 'click', function (evt) {
+                var points = myLine.getPointsAtEvent(evt);
+                if (points.length > 0) {
+                    myLine.scale.selectedIndex = myLine.datasets[0].points.indexOf(points[0])
+                    myLine.update();
+                }
+            });
49      }

mousemove 이벤트와 click 이벤트에 대한 핸들러를 추가하고 있습니다.
전자는 그래프에 마우스가 올 때 손가락 커서로 변경하여 클릭할 수 있음을 시각적으로 알 수 있도록 하고 있습니다.
중요한 것은 후자의 click 이벤트로, Chart.js의 Line 클래스의 getPointsAtEvent 메소드를 사용해, 클릭된 포인트(데이터치가 플롯 되고 있는 점)를 취득하고 있습니다.
포인트 오브젝트를 이용해 다양한 정보를 취득할 수 있습니다만, 이번은 어느 축이 클릭되었는지를 알고 싶기 때문에, 인덱스를 취득하고 있습니다.

방금 확장한 Scale 클래스의 selectedIndex로 설정합니다.
그리고 다시 그리기 위해 update 메서드를 호출합니다.

이제 클릭 시 빨간색 선이 표시됩니다.

그리고는 같은 이벤트 핸들러내에서, 취득한 인덱스를 이용해 데이터를 취득해, 테이블을 재기록해 주면 OK입니다.
(여기는 Chart.js 관계 없기 때문에 할애)

마지막으로

Chart.js는 거기까지 고기능이라고 하는 것은 아니지만, 외형과 같이 제작도 심플하기 때문에, 부족한 부분은 상당히 커스터마이즈하기 쉽습니다.
꼭 여러분도 사용해 보세요.