Chart.js API 开发者

Chart.js API 开发者由一组方法、属性和各种事件组成，我们可以使用这些方法、属性和事件来高效地生成和管理图表。

API 方法

1. .destroy(): 此方法销毁一个图表实例，这在我们不需要图表或需要替换现有图表时很有用。
2. .update(mode): 此函数刷新图表；它会重新渲染图表，并在我们更新任何数据时更改它。
3. .reset(): 此方法将图表重置为其初始状态。
4. .render(): 图表将使用该方法重新绘制，无需任何更新。
5. .stop(): 此函数将停止图表的正在进行的动画。
6. .resie(width, height): 当容器大小调整大小时，此方法会自动调用，但如果我们想使用代码调整画布元素的大小，也可以使用它来调整图表的大小。
7. .clear(): 将使用此方法清除图表画布。
8. .toBase64Image(quality, type): 当我们希望将图表保存为图片时，此方法很有用。 图表以高质量的 JPEG 或 PNG 图像形式提供。
9. .getElementsAtEventForMode(e, mode, options, useFinalPosition): 如果发生交互事件，则使用该方法获取图表元素。 通过包含可选参数，我们可以优化搜索并利用交互的结束位置。
10. 应该注意的是，使用 getSortedVisibleDatasetMetas() 方法将无法看到隐藏的数据集，该方法按它们在画布上绘制的顺序提供数据集元数据的数组。
11. .getDatasetMeta(index): 要检索特定数据集的元数据，请使用该方法。
12. .getVisibleDatasetCount: 可以使用该方法获取当前显示在图表上的数据集的数量。
13. .setDatasetVisibility(datasetIndex, visibility): 此函数修改数据集的可见性。
14. .toggleDataVisibility(index): 此函数遍历图表中的所有数据集，并切换特定数据点的可见性。
15. .getDataVisibility(index): 此方法检查图表中所有数据集中的数据点的可见性条件。
16. .hide(datasetIndex, dataIndex): 此函数可以隐藏整个数据集或数据集中单个数据点；它也可以被动画化。
17. .show(datasetIndex, dataIndex): 此函数将显示之前隐藏的数据集或数据点。
18. .setActiveElements(activeElements): 使用该方法以编程方式在图表上设置活动元素。
19. .isPluginEnabled(pluginId): 此函数确定是否为图表实例启用了特定插件。

语法

以下语法显示了 API 开发者方法。

destroy 方法语法。

update 方法语法。

resize 方法语法。

示例

以下示例显示了更新的 API 开发者图表。 在 Chart.js 框架中，我们可以为图表设置不同的 API 以确定开发者的方案。

示例 1

在此示例中，在使用了 update() 方法后，折线图会自动更新以反映新的数据点，5 秒后。

输出

以下输出显示了图表 API 开发者更新后的图表。

示例 2

在此示例中，通过将 chart.destory() 方法应用于按钮，图表被重置并重新创建。

输出

以下输出显示了图表 API 开发者销毁和重新生成图表。

示例 3

在此示例中，通过将 chart.resize() 方法应用于按钮，图表被重置并重新创建。 原始图表将高度和宽度都设置为 500。 点击按钮，使用 resize() API 将高度和宽度设置为 300。

输出

以下输出显示了图表 API 开发者调整大小后的图表。

示例 4

以下示例显示了清除 API 以隐藏图表，并使用另一个按钮重新创建 API 以显示图表。

输出

以下输出显示了图表 API 开发者调整大小后的图表。

结论

我们可以使用不同的 API 方法更新图表和图表元素。 我们可以设置更新、调整大小，并使用另一个可见图表方法来有效更新和显示数据。