플러그인

플러그인은 차트의 기본 동작을 변경하거나 사용자지정하는 가장 효과적인 방법입니다. version 2.1.0 (전역 플러그인만)에서 이미 소개되었고 version 2.5.0 (차트마다 플러그인과 옵션)에서 확장되었습니다.

플러그인 사용하기

플러그인은 차트 인스턴스 사이에서 공유될 수 있습니다:

var plugin = { /* 플러그인 구현 */ };

// chart1 and chart2 use "plugin"
var chart1 = new Chart(ctx, {
    plugins: [plugin]
});

var chart2 = new Chart(ctx, {
    plugins: [plugin]
});

// chart3 doesn't use "plugin"
var chart3 = new Chart(ctx, {});

플러그인은 차트 내에 plugins 설정 (a.k.a. inline plugins)으로 직접 정의될 수 있습니다:

var chart = new Chart(ctx, {
    plugins: [{
        beforeInit: function(chart, options) {
            //..
        }
    }]
});

그러나 많은 차트들에 사용자 지정을 적용할 때는 이상적인 방법은 아닙니다.

전역 플러그인

플러그인은 모든 차트 (a.k.a. global plugins)에 적용하기 위해 전역으로 등록될 수 있습니다:

Chart.plugins.register({
    // 플러그인 구현
});

주의: inline 플러그인은 전역으로 등록될 수 없습니다.

설정

플러그인 ID

플러그인은 설정 가능하기 위해 반드시 유일한 id가 정의되어야 합니다.

이 id는 반드시 npm package name convention을 따라야 합니다:

• 점 또는 언더바로 시작할 수 없습니다
• 어떤 non-URL-safe 문자도 포함될 수 없습니다
• 대문자는 포함될 수 없습니다
• 짧지만 합리적으로 설명해야 합니다

플러그인이 공개적으로 출시될 예정인 경우 registry를 확인하여 해당 이름이 이미 있는지 확인할 수 있습니다. 이 경우에 주의할 점은 패키지 이름은 반드시 접두사 chartjs-plugin-을 두어 Chart.js 플러그인 레지스트리입을 표현해야 합니다.

플러그인 옵션

플러그인 옵션은 options.plugins 설정 아래에 위치하고 플러그인 ID: options.plugins.{plugin-id}로 범위가 지정됩니다.

var chart = new Chart(ctx, {
    options: {
        foo: { ... },           // 차트 'foo' 옵션
        plugins: {
            p1: {
                foo: { ... },   // p1 플러그인 'foo' 옵션
                bar: { ... }
            },
            p2: {
                foo: { ... },   // p2 플러그인 'foo' 옵션
                bla: { ... }
            }
        }
    }
});

플러그인 비활성화

특정 차트 인스턴스에서 전역 플러그인을 비활성화 하려면 플러그인 옵션이 반드시 false로 설정되어야만 합니다:

Chart.plugins.register({
    id: 'p1',
    // ...
});

var chart = new Chart(ctx, {
    options: {
        plugins: {
            p1: false   // 이 인스턴스에서 'p1' 플러그인을 비활성화합니다
        }
    }
});

플러그인 코어 API

이용가능한 hooks (버전 2.7 기준):

• beforeInit
• afterInit
• beforeUpdate (취소 할 수 있음)
• afterUpdate
• beforeLayout (취소 할 수 있음)
• afterLayout
• beforeDatasetsUpdate (취소 할 수 있음)
• afterDatasetsUpdate
• beforeDatasetUpdate (취소 할 수 있음)
• afterDatasetUpdate
• beforeRender (취소 할 수 있음)
• afterRender
• beforeDraw (취소 할 수 있음)
• afterDraw
• beforeDatasetsDraw (취소 할 수 있음)
• afterDatasetsDraw
• beforeDatasetDraw (취소 할 수 있음)
• afterDatasetDraw
• beforeEvent (취소 할 수 있음)
• afterEvent
• resize
• destroy