# 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.

可以提供 模式 字串來表示應使用過渡設定。核心呼叫此方法時使用 'active'、'hide'、'reset'、'resize'、'show' 或 undefined 中的任一參數。'none' 也是支援的模式，用於略過單次更新的動畫。有關詳細資訊，請參閱動畫文件。

範例

myChart.update('active');

有關詳細資訊，請參閱更新圖表。

# .reset()

將圖表重設為初始動畫之前的狀態。然後可以使用 更新 觸發新的動畫。

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)

對 Chart 執行個體傳遞事件和模式的 getElementsAtEventForMode(e, mode, options, useFinalPosition) 會傳回找到的元素。選項 和 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)

尋找與目前索引相符的資料集，並傳回該元資料。傳回的資料包含所有用於建構圖表的元資料。

元資料的 資料 屬性將包含每個點、長條圖等，依圖表類型而定的資訊。

可在 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');

# Static: getChart(key)

根據所提供的鍵尋找圖表實體。如果鍵為 string，則會將它解釋為圖表的畫布節點 ID。鍵也可以是 CanvasRenderingContext2D 或 HTMLDOMElement。如果找不到圖表，則會傳回 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)

用於取消註冊全球所有圖表的外掛程式、軸類型或圖表類型。

← 開發人員新的軸 →