Chart.js - にほんご。

Plugin

更新日: 2018-09-04

プラグインは、デフォルト動作の変更や、カスタマイズするのに最も効率的な方法です。 プラグインは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.6以降)

  • 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

© 2013 Chart.js is available under the MIT license

このコンテンツはChart.jsドキュメントを翻訳/改変したものです。