Chart.js에서 커서를 표시하는 플러그인을 만들었습니다.

자바스크립트 최고! JavaScript는 신!
이번에는 그래프를 그리는 라이브러리인 Chart.js의 플러그인을 만들어 보았다고 하는 이야기입니다.

테스트 환경

Google 크롬
Chart.js 2.5.0

Chart.js란?

html의 canvas 태그를 사용하여 그래프를 그려주는 멋진 녀석으로, 예를 들어 sin 파형의 데이터를 넣으면 이런 느낌이 듭니다.

그래프 그릴 때에 애니메이션이 붙어 있거나 하고 매우 세련된입니다만, 원하는 기능이 없거나 합니다. 범위 선택이 가능한 기능이 디폴트가 아니기 때문에 만들어 보았습니다!

완성된 것

github 링크는 여기

플러그인 작성 정보

Chart.js 플러그인은 필요한 API를 구현하는 객체를 다음과 같이 chart에 전달하면됩니다.

var plugin = { /* plugin implementation */ };
var chart = new Chart(ctx, {
    plugins: [plugin]
});           

또한 다음과 같이 Chart.js에 등록해 버릴 수도 있습니다.

Chart.pluginService.register(plugin);
var chart = new Chart(ctx, {
    pluginOptions: { ... } 
});           

플러그인용 API는 여기에 나열되어 있습니다. 일람을 봐도 어느 것이 어느 타이밍에 불리는지를 알기 어렵습니다만, 그래프상에 무언가를 표시하는 계의 플러그인이라면 이하의 2개로 충분하겠지요.


API 이름
사용법


beforeInit
플러그인을 초기화하는 데 사용합니다. 여기서 EventListner라든지 등록한다.

afterDraw
update()를 할 때 그래프 그리기가 끝나고 나서 불린다?


이러한 함수는 이름 그대로의 타이밍으로 불려, 인수에 Chart의 인스턴스가 들어갑니다.
이것을 사용해 canvas의 eventListner를 등록하거나 하는군요.

var node = chartInstance.chart.ctx.canvas;
var ctx = chartInstance.chart.ctx;

여기서 node로 addEventLister를 하면 그래프 드로잉에 사용하고 있는 canvas에 event를 추가할 수 있습니다.

플러그인을 만드는 데 도움이되는 팁

선 그리기

ctx.beginPath();
ctx.setLineDash([]);
ctx.lineWidth = 2;
ctx.strokeStyle = 'rgba(0, 0, 0, 1.0)';
ctx.moveTo(50, chartInstance.chartArea.top);
ctx.lineTo(50, chartInstance.chartArea.bottom);
ctx.stroke();

이것은 캔버스의 offsetX가 50 곳에 직선을 그립니다. chartArea의 top, bottom, left, right에서 그래프 그리기 영역의 offset을 알 수 있습니다. ctx.setLineDash([5, 10]) 같으면 파선을 그릴 수도 있습니다. 자세한 내용은 여기 또는 canvas에 대해 살펴보면 좋습니다.

좌표 얻기

그래프가 draw 되어 있는 경우에 값에 대응하는 canvas 내에서 offset 치를 취득할 수 있습니다.

let scale = chartInstance.scales['x-axis-0'];
let pixel = scale.getPixelForValue(value);

여기서 chartInstance라는 것은 beforeInit라는 플러그인의 인수입니다. x-axis-0이라는 것은 x축의 디폴트의 이름으로, 스스로 이름을 붙일 수도 있습니다(내가 만든 플러그인은 이름 바꾸면 사용할 수 없게 됩니다・・・). 또, 이하와 같이 하면 offset치로부터 그래프로의 값을 취득하는 것도 가능합니다.

let value = scale.getValueForPixel(pixel);

참고

Chart.js 문서

플러그인 링크 모음

chartjs-plugin-zoom