API

各チャートには、便利グローバルなプロトタイプメソッドセットがあります。 これらはChart.jsで生成された全てのチャートで利用できます。 例では折れ線グラフで使っています。

// 例：
var myLineChart = new Chart(ctx, config);

.destroy()

任意のチャートのインスタンスを破棄します。 これでChart.jsのチャートオブジェクトに保持している参照と、 アタッチされたイベントを破棄します。 このメソッドは、canvasに新しいチャートを生成する前に呼び出す必要があります。

// 特定のチャートインスタンスを破棄
myLineChart.destroy();

.update(config)

チャートの更新をトリガーします。 このメソッドは、dataオブジェクトを更新した後でも、安全に呼び出すことができます。 全てのスケール、凡例が更新され、チャートを再描画します。

// durationは再描画するアニメーションの時間です。
// lazyはbooleanです。trueの場合、他のアニメーションで中断することができます。
myLineChart.data.datasets[0].data[2] = 50; // 最初のデータセットの値を'March'から'50'に更新します。
myLineChart.update(); // updateを呼び出すと、Marchの位置が'90'から'50'にアニメーションで表示されます。

注意：データ参照の置換(myLineChart.data = {datasets: [...}])は、 ver2.6以降でのみ有効です。 それ以前のバージョンでデータオブジェクト全体を置換するには、 次の方法で解決することができます。myLineChart.config.data = {datasets: [...]}

configオブジェクトには、更新処理のための追加設定を指定することができます。 updateをイベントハンドラで手動で行い、異なるアニメーションが必要な場合に便利です。

以下のプロパティがサポートされています。

• duration (number)：再描画アニメーションの時間(ms)。
• lazy (boolean)：trueの場合、他のアニメーションで中断することができます。
• easing (string)：アニメーションのイージング。イージングを参照してください。

例

myChart.update({
    duration: 800,
    easing: 'easeOutBounce'
})

詳しくはチャートの更新を参照して下さい。

.reset()

最初のアニメーションの前の状態にリセットします。 updateを使って新しいアニメーションをトリガーすることができます。

myLineChart.reset();

.render(config)

全てのチャートの再描画をトリガーします。 このメソッドは、データを更新しないことに注意してください。 更新する場合は.update()を使用してください。

configオブジェクトの詳細は.update()を参照して下さい。

// durationは再描画するアニメーションの時間です。
// lazyはbooleanです。trueの場合、他のアニメーションで中断することができます。
myLineChart.render({
    duration: 800,
    lazy: false,
    easing: 'easeOutBounce'
});

.stop()

任意のアニメーションのループを停止します。 これにより、チャートのアニメーションが一時停止します。 .render()を呼び出すと、再度アニメーションを実行します。

// チャートのアニメーションループを一時停止します。
myLineChart.stop();
// => 連鎖性を保つために'this'を返します。

.resize()

canvas要素のサイズを手動で変更します。 このメソッドは、キャンバスをリサイズする度に実行され、 キャンバスノードのサイズを変更した場合は、手動で呼び出すことができます。

// サイズ変更して再描画し、要素を塗りつぶします
myLineChart.resize();
// => 連鎖性を保つために'this'を返します。

.clear()

canvasをクリアします。 アニメーションのフレーム間で幅広く使用されており、役に立つかもしれません。

// myLineChartが表示されているcanvasをクリアします。
myLineChart.clear();
// => 連鎖性を保つために'this'を返します。

.toBase64Image()

現在のチャート状態をBase64エンコードして文字列を返します。

myLineChart.toBase64Image();
// => canvasの状態をpng画像にしたURLを返します。

.generateLegend()

グラフの凡例のHTML文字列を返します。 凡例はオプションのlegendCallbackから生成されます。

myLineChart.generateLegend();
// => 凡例のHTML文字列を返します。

.getElementAtEvent(e)

イベントの引数か、jQueryのイベントをgetElementAtEvent(event)に渡して呼び出すと、 イベントの実行ポイントにある要素を1つだけ返します。 範囲内に複数の要素がある場合、最初の要素だけが返されます。 このメソッドから返される値は、1つのパラメータを持った配列です。 配列はget～AtEventメソッド間でAPIの整合性を保つために使用されます。

myLineChart.getElementAtEvent(e);
// => イベント発生ポイントの最初の要素を返します。

クリックされた要素を取得するには、getElementAtEventを使うことが出来ます。

function clickHandler(evt) {
    var item = myChart.getElementAtEvent(evt)[0];

    if (item) {
        var label = myChart.data.labels[firstPoint._index];
        var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
    }
}

.getElementsAtEvent(e)

イベントポイントの要素を探し、同じデータインデックスの全ての要素を返します。 このメソッドは、内部的に'label'の強調表示に利用されます。

イベントの引数か、jQueryのイベントをgetElementsAtEvent(event)に渡して呼び出すと、 イベントの実行ポイントにある要素を返します。

canvas.onclick = function(evt){
    var activePoints = myLineChart.getElementsAtEvent(evt);
    // => activePointsはクリックイベントが発生したポイントと同じ位置にある要素の配列です。
};

この機能は、DOMベースのツールチップの実装や、アプリケーションで独自の動作をトリガーするのに便利です。

.getDatasetAtEvent(e)

イベントポイントの要素を探し、そのデータセットから全ての要素を返します。 このメソッドは、内部的に'dataset'の強調表示に利用されます。

myLineChart.getDatasetAtEvent(e);
// => 要素の配列を返します。

.getDatasetMeta(index)

現在のインデックスに一致するデータセットを探し、メタデータを返します。 返されるデータには、チャートの生成に必要な全てのメタデータが含まれます。

メタデータのdataプロパティには、 チャートタイプに応じて、各点、矩形等の情報が含まれます。

Chart.jsのテストでは、 様々な使用例を使うことができます。

var meta = myChart.getDatasetMeta(0);
var x = meta.data[0]._model.x