# API

各チャートには、共有チャートタイプに一連のグローバルプロトタイプメソッドがあり、これらは便利かもしれません。これらはChart.jsで作成されたすべてのチャートで使用できますが、例として作成した折れ線グラフを使用しましょう。

// For example:
const myLineChart = new Chart(ctx, config);

# .destroy()

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

// Destroys a specific chart instance
myLineChart.destroy();

# .update(mode?)

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

myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50
myLineChart.update(); // Calling update now animates the position of March from 90 to 50.

トランジション設定を使用する必要があることを示すために、mode文字列を指定できます。コアはこのメソッドを'active'、'hide'、'reset'、'resize'、'show'、またはundefinedのいずれかを使用して呼び出します。単一の更新のアニメーションをスキップするためのサポートされているモードとして'none'もあります。詳細については、アニメーションのドキュメントを参照してください。

例

myChart.update('active');

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

# .reset()

チャートを最初のアニメーション前の状態にリセットします。その後、updateを使用して新しいアニメーションをトリガーできます。

myLineChart.reset();

# .render()

すべてのチャート要素の再描画をトリガーします。ただし、これは新しいデータの要素を更新しません。その場合は.update()を使用してください。

# .stop()

現在のアニメーションを停止するために使用します。これにより、現在のアニメーションフレーム中はチャートが一時停止します。再アニメーションするには.render()を呼び出してください。

// Stops the charts animation loop at its current frame
myLineChart.stop();
// => returns 'this' for chainability

# .resize(width?, height?)

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

パラメータなしで.resize()を呼び出すと、チャートはコンテナ要素のサイズになります。または、明示的な寸法を渡すこともできます（例：印刷の場合）。

// Resizes & redraws to fill its container element
myLineChart.resize();
// => returns 'this' for chainability
// With an explicit size:
myLineChart.resize(width, height);

# .clear()

チャートキャンバスをクリアします。アニメーションフレーム間で内部的に広く使用されていますが、役立つ場合があります。

// Will clear the canvas that myLineChart is drawn on
myLineChart.clear();
// => returns 'this' for chainability

# .toBase64Image(type?, quality?)

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

myLineChart.toBase64Image();
// => returns png data url of the image on the canvas
myLineChart.toBase64Image('image/jpeg', 1)
// => returns a jpeg data url in the highest quality of the canvas

# .getElementsAtEventForMode(e, mode, options, useFinalPosition)

イベントとモードを渡してチャートインスタンスでgetElementsAtEventForMode(e, mode, options, useFinalPosition)を呼び出すと、検出された要素が返されます。optionsおよびuseFinalPosition引数は、ハンドラーに渡されます。

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

function clickHandler(evt) {
    const points = myChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
    if (points.length) {
        const firstPoint = points[0];
        const label = myChart.data.labels[firstPoint.index];
        const value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
    }
}

# .getSortedVisibleDatasetMetas()

キャンバス上に描画され、非表示ではないすべてのデータセットメタの配列を、描画順序で返します。

const visibleMetas = chart.getSortedVisibleDatasetMetas();

# .getDatasetMeta(index)

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

メタデータのdataプロパティには、チャートの種類に応じて、各ポイント、バーなどの情報が含まれています。

Chart.jsのテスト (新しいウィンドウで開きます)には、使用方法の詳しい例があります。

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

# getVisibleDatasetCount

現在非表示になっていないデータセットの数を返します。

const numberOfVisibleDatasets = chart.getVisibleDatasetCount();

# setDatasetVisibility(datasetIndex, visibility)

特定のデータセットの表示状態を設定します。これは、HTMLでチャート凡例を作成するために使用できます。HTMLアイテムのいずれかをクリックすると、setDatasetVisibilityを呼び出して適切なデータセットを変更できます。

chart.setDatasetVisibility(1, false); // hides dataset at index 1
chart.update(); // chart now renders with dataset hidden

# toggleDataVisibility(index)

すべてのデータセットのアイテムの表示状態を切り替えます。データセットは、効果を発揮するために、この機能を明示的にサポートする必要があります。内部チャートタイプでは、ドーナツ/円、極座標、棒グラフがこれを使用します。

chart.toggleDataVisibility(2); // toggles the item in all datasets, at index 2
chart.update(); // chart now renders with item hidden

# getDataVisibility(index)

すべてのデータセットのデータインデックスの保存された表示状態を返します。toggleDataVisibilityによって設定されます。データセットコントローラーは、このメソッドを使用して、アイテムが表示されないようにする必要があるかどうかを判断する必要があります。

const visible = chart.getDataVisibility(2);

# hide(datasetIndex, dataIndex?)

dataIndexが指定されていない場合、指定されたデータセットの表示状態をfalseに設定します。チャートを更新し、'hide'モードでデータセットをアニメーション化します。このアニメーションは、アニメーションオプションのhideキーで設定できます。詳細については、アニメーションのドキュメントを参照してください。

dataIndexが指定されている場合、その要素の非表示フラグをtrueに設定し、チャートを更新します。

chart.hide(1); // hides dataset at index 1 and does 'hide' animation.
chart.hide(0, 2); // hides the data element at index 2 of the first dataset.

# show(datasetIndex, dataIndex?)

dataIndexが指定されていない場合、指定されたデータセットの表示状態をtrueに設定します。チャートを更新し、'show'モードでデータセットをアニメーション化します。このアニメーションは、アニメーションオプションのshowキーで設定できます。詳細については、アニメーションのドキュメントを参照してください。

dataIndexが指定されている場合、その要素の非表示フラグをfalseに設定し、チャートを更新します。

chart.show(1); // shows dataset at index 1 and does 'show' animation.
chart.show(0, 2); // shows the data element at index 2 of the first dataset.

# setActiveElements(activeElements)

チャートのアクティブ（ホバー）要素を設定します。「プログラムによるイベント」サンプルファイルで、これがどのように動作するかを確認してください。

chart.setActiveElements([
    {datasetIndex: 0, index: 1},
]);

# isPluginEnabled(pluginId)

指定されたIDを持つプラグインがチャートインスタンスに登録されているかどうかをブール値で返します。

chart.isPluginEnabled('filler');

# 静的: getChart(key)

指定されたキーからチャートインスタンスを検索します。キーがstringの場合、ChartのCanvasノードのIDとして解釈されます。キーはCanvasRenderingContext2DまたはHTMLDOMElementにすることもできます。Chartが見つからない場合はundefinedを返します。見つかるには、チャートが以前に作成されている必要があります。

const chart = Chart.getChart("canvas-id");

# 静的: register(chartComponentLike)

プラグイン、軸の種類、またはチャートの種類をグローバルにすべてのチャートに登録するために使用します。

import { Chart, Tooltip, LinearScale, PointElement, BubbleController } from 'chart.js';
Chart.register(Tooltip, LinearScale, PointElement, BubbleController);

# 静的: unregister(chartComponentLike)

プラグイン、軸の種類、またはチャートの種類をグローバルにすべてのチャートから登録解除するために使用します。

← 開発者向け新しい軸 →