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?)

这将返回图表当前状态的 base 64 编码字符串。

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，则将其解释为图表 Canvas 节点的 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)

用于全局注销所有图表中的插件、坐标轴类型或图表类型。