プラグイン

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

プラグインの使用

プラグインは、チャートインスタンス間で共有できます。

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

// chart1とchart2は "plugin"を使用します。
var chart1 = new Chart(ctx, {
    plugins: [plugin]
});

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

// chart3は "プラグイン"を使用しません
var chart3 = new Chart(ctx, {});

プラグインはチャートのpluginsコンフィグで直接定義することもできます（インラインプラグインとも呼ばれます）。

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

ただし、この方法は、多くのチャートをカスタマイズする必要がある場合には理想的ではありません。

グローバルプラグイン

プラグインは、すべてのチャートに適用されるように一括して登録することができます（グローバルプラグインとも呼ばれます）：

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

注意：インラインプラグインは一括して登録することはできません。

設定

プラグインID

プラグインは、設定を可能にするために一意のIDを定義する必要があります。

このIDは、npmパッケージ名の規則に従う必要があります。

• ドットまたはアンダースコアで始めることはできません
• URLセーフでない文字は使用できません
• 大文字は使用できません
• 短いものでなければならないが、合理的に記述的でなければなりません

プラグインが公開される予定の場合は、レジストリをチェックして、その名前のものがあるかどうかを確認してください。この場合、パッケージ名にはChart.jsプラグインレジストリに表示されるように chartjs-plugin-という接頭辞が必要です。

プラグインのオプション

プラグインオプションは options.plugins設定の下にあり、プラグインIDoptions.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'を無効にする
        }
    }
});

プラグインコアAPI

利用可能なフック（バージョン2.6以降）

• beforeInit
• afterInit
• beforeUpdate （キャンセル可能）
• afterUpdate
• beforeLayout （キャンセル可能）
• afterLayout
• beforeDatasetsUpdate （キャンセル可能）
• afterDatasetsUpdate
• beforeDatasetUpdate （キャンセル可能）
• afterDatasetUpdate
• beforeRender （キャンセル可能）
• afterRender
• beforeDraw （キャンセル可能）
• afterDraw
• beforeDatasetsDraw （キャンセル可能）
• afterDatasetsDraw
• beforeDatasetDraw （キャンセル可能）
• afterDatasetDraw
• beforeEvent （キャンセル可能）
• afterEvent
• resize
• destroy