Plugin

プラグインは、デフォルト動作の変更や、カスタマイズするのに最も効率的な方法です。 プラグインはver2.1.0(グローバルプラグインのみ)で導入され、 ver2.5.0(チャートごとのプラグインとオプション)で拡張されました。

プラグインの利用

プラグインはチャートのインスタンス間で共有することができます。

var plugin = { /* プラグインの実装 */ };

// chart1とchart2で"plugin"プラグインを使用
var chart1 = new Chart(ctx, {
    plugins: [plugin]
});

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

// chart3は"plugin"プラグインを不使用
var chart3 = new Chart(ctx, {});

プラグインはチャートのplugin設定で直接定義することもできます。(別名inline plugin)

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

しかし、この方法は、多くのチャートにカスタマイズを適用する必要がある場合には向いていません。

グローバルプラグイン

プラグインをグローバルに追加することで、全てのチャートに適用することができます。(別名global plugin)

Chart.plugins.register({
    // プラグインの実装
});

注意：インラインプラグインはグローバルに登録することはできません。

設定

プラグインID

プラグインは設定を有効にするために、一意のIDを定義しなければなりません。

このIDはnpmのパッケージ命名規則に従うべきです。

• .(ドット)、_(アンダースコア)で始めることは出来ません。
• URLセーフでない文字を使用してはいけません。
• 大文字を使用してはいけません。
• 短く、合理的で説明的でなければなりません。

プラグインを公開する予定の場合、 すでにregistryに同じ名前のプラグインが無いか、確認したいかもしれません。 この場合、Chart.jsプラグインのregistryに表示させるために、 パッケージ名の前にchartjs-plugin-を付ける必要があります。

プラグインオプション

プラグインオプションはoptions.pluginsの下にあり、 プラグインID(options.plugins.{plugin-id})にスコープされています。

var chart = new Chart(ctx, {
    config: {
        foo: { ... },           // チャートの'foo'オプション
        plugins: {
            p1: {
                foo: { ... },   // 'p1'プラグインの'foo'オプション
                bar: { ... }
            },
            p2: {
                foo: { ... },   // 'p2'プラグインの'foo'オプション
                bla: { ... }
            }
        }
    }
});

プラグインの無効化

グローバルプラグインを特定のチャートで無効化するには、 プラグインオプションをfalseに設定する必要があります。

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

var chart = new Chart(ctx, {
    config: {
        plugins: {
            p1: false   // このチャートでは'p1'プラグインを無効化
        }
    }
});

プラグインのCoreAPI

利用可能なフック(ver2.7以降)

• beforeInit
• afterInit
• beforeUpdate (cancellable)
• afterUpdate
• beforeLayout (cancellable)
• afterLayout
• beforeDatasetsUpdate (cancellable)
• afterDatasetsUpdate
• beforeDatasetUpdate (cancellable)
• afterDatasetUpdate
• beforeRender (cancellable)
• afterRender
• beforeDraw (cancellable)
• afterDraw
• beforeDatasetsDraw (cancellable)
• afterDatasetsDraw
• beforeDatasetDraw (cancellable)
• afterDatasetDraw
• beforeEvent (cancellable)
• afterEvent
• resize
• destroy