プラグイン

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

プラグインの使用

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

var plugin = { /* plugin implementation */ };

// 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設定 (別名.インラインプラグイン):

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

ただし、カスタマイズを多くのグラフに適用する必要がある場合、このアプローチは理想的ではありません。

グローバルプラグイン

プラグインはグローバルに登録して、すべてのチャートに適用できます（別名プラグイン）。グローバルプラグイン):

Chart.plugins.register({
    // plugin implementation
});

ノート：列をなしてプラグインをグローバルに登録することはできません。

構成

プラグインID

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

この ID は、npm パッケージ名の規則:

• ドットやアンダースコアで始めることはできません
• URL セーフでない文字を含めることはできません
• 大文字を含めることはできません
• 短いものですが、適度に説明的なものにする必要があります

プラグインが公開リリースされる予定の場合は、次のことを確認してください。レジストリその名前のものがすでにあるかどうかを確認してください。この場合、パッケージ名の前に次の文字を付ける必要があることに注意してください。chartjs-plugin-Chart.js プラグイン レジストリに表示されます。

プラグインオプション

プラグイン オプションはoptions.pluginsconfig にあり、プラグイン ID によってスコープが設定されます。options.plugins.{plugin-id}。

var chart = new Chart(ctx, {
    options: {
        foo: { ... },           // chart 'foo' option
        plugins: {
            p1: {
                foo: { ... },   // p1 plugin 'foo' option
                bar: { ... }
            },
            p2: {
                foo: { ... },   // p2 plugin 'foo' option
                bla: { ... }
            }
        }
    }
});

プラグインを無効にする

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

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

var chart = new Chart(ctx, {
    options: {
        plugins: {
            p1: false   // disable plugin 'p1' for this instance
        }
    }
});

プラグインコアAPI

利用可能なフック (バージョン 2.7 以降):

• b6b32月3-7029-4253-96d7-2658323923e3
• afterInit
• beforeUpdate (キャンセル可能)
• afterUpdate
• beforeLayout (キャンセル可能)
• afterLayout
• beforeDatasetsUpdate (キャンセル可能)
• afterDatasetsUpdate
• beforeDatasetUpdate (キャンセル可能)
• afterDatasetUpdate
• beforeRender (キャンセル可能)
• afterRender
• beforeDraw (キャンセル可能)
• afterDraw
• beforeDatasetsDraw (キャンセル可能)
• afterDatasetsDraw
• beforeDatasetDraw (キャンセル可能)
• afterDatasetDraw
• beforeEvent (キャンセル可能)
• afterEvent
• resize
• destroy