チャートプロトタイプメソッド

各チャートには、共有されたChartTypeにおいてグローバルなプロトタイプメソッドのセットが定義されており、役に立つかもしれません。これらはChart.jsで作成されたすべてのチャートで使用できますが、ここでは線グラフのページで使用した例を使って説明します。

(訳注: 再掲)

var myLineChart = new Chart(ctx, {  
    "type": "line",
    "data": {
        "labels": [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月"
        ],
        "datasets": [{
            "label": "1つ目のデータセット",
            "data": [65, 59, 80, 81, 56, 55, 40],
            "fill": false,
            "borderColor": "rgb(75, 192, 192)",
            "lineTension": 0.1
        }]
    },
    "options": {
    }
});

(訳注: 再掲ここまで)

// 例えば:
var myLineChart = new Chart(ctx, config);

.destroy()

これを使用すると、作成されたチャートインスタンスを破棄します。これにより、Chart.js内のチャートオブジェクトに格納されているすべての参照が、Chart.jsにアタッチされた関連するイベントリスナと共にクリーンアップされます。 これは、キャンバスを新しいチャートに再利用する場合は、その前に呼び出す必要があります。

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

.update(config)

グラフの更新をトリガーします。これは、データオブジェクトを更新した後に安全に呼び出すことができます。これにより、すべてのスケール、凡例が更新され、グラフが再描画されます。

myLineChart.data.datasets[0].data[2] = 50; // 1つ目のデータセットの値 'March'を50に更新します。
myLineChart.update(); // updateを呼び出すと、3月の位置が90から50にアニメーションされるようになります。

注意：データ参照の置き換え（例： myLineChart.data = {datasets: [...]})は、version 2.6以降で機能します。 それ以前では、全てのデータオブジェクトの置き換えは、次の方法で代替します。 myLineChart.config.data = {datasets: [...]}.

configオブジェクトに追加の設定を指定して更新処理を行うことができます。これは、updateをイベントハンドラ内で手動で呼び出して通常と異なるアニメーションをさせたい場合に便利です。

configオブジェクトでは、次のプロパティがサポートされています。

  • duration (number): 再描画のアニメーションの時間（ミリ秒単位）。
  • lazy (boolean): trueの場合、他のアニメーションでアニメーションを中断することができます
  • easing (string): アニメーションイージング機能。設定可能な値については、アニメーションイージングを参照してください。

例:

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

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

.reset()

先頭のアニメーションフレームの前の位置に、チャート状態をリセットします。新規アニメーションは、updateを使ってトリガすることができます。

myLineChart.reset();

.render(config)

すべてのチャート要素の再描画をトリガします。これは、新しいデータを使用してチャート要素を更新するわけではないことに注意してください。その場合は .update()を使います。

configオブジェクトの詳細については、 .update(config)を参照してください。

myLineChart.render({
    duration: 800,
    lazy: false,
    easing: 'easeOutBounce'
});

.stop()

これを使用すると、現在のアニメーションループを停止させることができます。アニメーションフレームがどこにあっても、チャートは一時停止します。 .render()を呼び出すと、アニメーションが再開します。

// グラフのアニメーションループを現在のフレームで停止します。
myLineChart.stop();
// => 関数を連鎖させて呼び出すことを可能にする(chainability)ために、'this'を返します

.resize()

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

// サイズを変更して再描画し、そのコンテナ要素を埋める。
myLineChart.resize();
// => 関数を連鎖させて呼び出すことを可能にする(chainability)ために、'this'を返します

.clear()

チャートキャンバスをクリアします。アニメーションフレーム間で頻繁に使用されていますが、明示的に呼び出すのが役に立つこともあるかもしれません。

// myLineChartが描画されるキャンバスをクリアします。
myLineChart.clear();
// => 関数を連鎖させて呼び出すことを可能にする(chainability)ために、'this'を返します

.toBase64Image()

これは、チャートの現在の状態のbase64エンコード文字列を返します。

myLineChart.toBase64Image();
// =>キャンバス上の画像のpngデータのURLを返します

.generateLegend()

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

myLineChart.generateLegend();
// =>このチャートの凡例のHTML文字列を返します

.getElementAtEvent(e)

作成したチャートインスタンスにおいて、getElementAtEvent(event)を、イベントの引数またはjQueryイベントを渡して呼び出すと、イベント位置にある単一の要素が返されます。範囲内に複数の項目がある場合は、最初の項目のみが返されます。このメソッドから返される値は、単一のパラメータを持つ配列です。配列は get*AtEventメソッド間で一貫したAPIを維持するために使用されます。

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

クリックされたアイテムを取得するには、 getElementAtEventを使用できます。

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

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

.getElementsAtEvent(e)

イベントポイントの下の要素を探し、同じデータインデックスのすべての要素を返します。これは内部的に 'ラベル'モードの強調表示に使用されます。

作成したチャートインスタンスで getElementsAtEvent(event)を、イベントの引数またはjQueryイベントを渡して呼び出すと、そのイベントと同じ位置にある点要素が返されます。

canvas.onclick = function(evt){
    var activePoints = myLineChart.getElementsAtEvent(evt);
    // => activePointsは、キャンバス上のclickイベントと同じ位置にある点の配列です。    
};

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

.getDatasetAtEvent(e)

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

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

.getDatasetMeta(index)

現在のインデックスに一致するデータセットを探し、そのメタデータを返します。返されたデータには、チャートの作成に使用されるすべてのメタデータが含まれています。

メタデータの dataプロパティは、チャートタイプに応じて、各点、矩形などに関する情報を含みます。

幅広い使用例がChart.jsテストで利用可能です。

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

results matching ""

    No results matching ""