New Charts

Chart.js2.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に上書きされます。
    // 1つのスケールを使用するチャートタイプ
    linkScales: function() {},

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

既存のグラフタイプの拡張

既存のコントローラタイプの拡張や、置き換えは簡単です。 組み込み済みのチャートタイプを、自分のコンストラクタに置き換えるだけです。

組み込み済みのコントローラタイプは以下の通りです。

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

例えば、バブルチャートを拡張して新しいチャートタイプを定義するには、以下のように指定します。

// 'derivedBubble'のデフォルト値を'bubble'と同じにします。
// Chart.defaults[chartType]を使ってデフォルト値を見つけます。
// デフォルト値が見つからない場合、バグがあるようです。
Chart.defaults.derivedBubble = Chart.defaults.bubble;

// Chart.controllers.bubble.extend({ extensions here });を使うことをお勧めします。
var custom = Chart.controllers.bubble.extend({
    draw: function(ease) {
        // 最初にスーパーメソッドを呼び出します。
        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コントローラ

棒グラフ(bar)のコントローラには、特殊なプロパティがあります。 バーの幅を正しく計算するために、コントローラはバーにマップするデータセット数を決めなければなりません。 そのために、barコントローラは、初期化中にデータセット内にbarプロパティを付加してください。 置換や、変更したbarコントローラを生成する場合も同様です。 これにより、通常の棒グラフと、新しく派生した棒グラフがシームレスに動作します。