新しいチャート

Chart.js 2.0では、各データセットにコントローラの概念が導入されています。スケールのように、新しいコントローラは必要に応じて書き込むことができます。

Chart.controllers.MyType = Chart.DatasetController.extend({

});


// Chart.js APIを使用して、グラフの新しいインスタンスを作成できるようになりました
new Chart(ctx, {
    // これはコンストラクタが登録された場所を指す文字列です。つまり、Chart.controllers.MyType
    type: 'MyType',
    data: data,
    options: options
});

データセットコントローラインタフェース

データセットコントローラは、次のインターフェイスを実装する必要があります。

{
    // データセットの各データに対して要素を作成します。 dataset.metaDataとしてデータセット上の配列に要素を格納します
    addElements: function() {},

    // データの指定されたインデックスに単一要素を作成し、その状態をリセットします。
    addElementAndReset: function(index) {},

    // データセットの表現を描画する。
    // @param ease : 指定されている場合、この数値は要素をどれだけ遷移させるかを表します。提供されているコントローラのどれかでdraw()の実装を参照して、これをどのように使うべきか見てください。
    draw: function(ease) {},

    // 指定された要素からマウスオーバースタイルを削除します
    removeHoverStyle: function(element) {},

    // 指定された要素にマウスオーバースタイルを追加します
    setHoverStyle: function(element) {},

    // 新しいデータに応答して要素を更新する
    // @param reset : trueの場合、最終的な値までアニメーションできるようにするため、要素をリセット状態にします
    update: function(reset) {},
}

次のメソッドは、派生データセットコントローラによってオーバーライドすることができます。

{
    // コントローラを初期化する
    initialize: function(chart, datasetIndex) {},

    // このコントローラによって表されるデータセットがスケールにリンクされていることを確認します。単一スケールの鶏頭図とドーナッツコントローラではhelpers.noopにオーバーライドされます。
    linkScales: function() {},

    // 更新がトリガされたときにメインチャートコントローラによって呼び出されます。デフォルトの実装では、要素を変更および作成するデータポイントの数が適切に処理されます。
    buildOrUpdateElements: function() {}
}

既存のグラフタイプを拡張する

既存のコントローラタイプを拡張または交換するのは簡単です。組み込み型のコンストラクタを自分のものに置き換えるだけです。

組み込みコントローラタイプは次のとおりです。

• Chart.controllers.line
• Chart.controllers.bar
• Chart.controllers.radar
• Chart.controllers.doughnut
• Chart.controllers.polarArea
• Chart.controllers.bubble

たとえば、バブルチャートから拡張された新しいチャートタイプを取得するには、次のようにします。

// 'derivedBubble'のデフォルト設定をバブルのデフォルトと同じに設定します。
// Chart.defaults[chartType]を実行してデフォルトを探します
// デフォルトが存在しない場合はバグが存在するようです
Chart.defaults.derivedBubble = Chart.defaults.bubble;

// Chart.controllers.bubble.extend({ extensions here })を使用することをおすすめします。
var custom = Chart.controllers.bubble.extend({
    draw: function(ease) {
        // 最初にsuperメソッドを呼び出す
        Chart.controllers.bubble.prototype.draw.call(this, ease);

        // このデータセットに対してカスタム描画を行うことができます。ここでは、各データセットの最初のポイントの周りに赤いボックスを描画します
        var meta = this.getMeta();
        var pt0 = meta.data[0];
        var radius = pt0._view.radius;

        var ctx = this.chart.chart.ctx;
        ctx.save();
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 1;
        ctx.strokeRect(pt0._view.x - radius, pt0._view.y - radius, 2 * radius, 2 * radius);
        ctx.restore();
    }
});

// コントローラを格納して、チャート初期化ルーチンがChart.controllers[type]からコントローラを探し出せるようにします。
Chart.controllers.derivedBubble = custom; 

// 新しいチャートタイプを作成して使用できるようになりました
new Chart(ctx, {
    type: 'derivedBubble',
    data: data,
    options: options,
});

棒グラフコントローラ

棒グラフコントローラには、知っておくべき特別なプロパティがあります。棒の幅を正しく計算するには、コントローラは棒に割り当てるデータセットの数を決定する必要があります。
これを行うために、棒グラフコントローラは、初期化の間、データセットにプロパティ`bar`を添付します。置換または更新された棒グラフコントローラを作成する場合は、同じ操作を行う必要があります。これにより、通常の棒グラフと新しい派生棒グラフがシームレスに動作するようになります。