Chart.js 示例

¥Chart.js Samples

你可以通过侧边栏浏览示例。

¥You can navigate through the samples via the sidebar.

或者，你可以在本地运行它们。为此，从 GitHub 克隆 Chart.js 仓库 (opens new window)，运行 pnpm ci 安装所有包，然后运行 pnpm run docs:dev 构建文档。构建完成后，你可以去 localhost:8080/samples (opens new window) 查看示例。

¥Alternatively, you can run them locally. To do so, clone the Chart.js repository (opens new window) from GitHub, run pnpm ci to install all packages, then run pnpm run docs:dev to build the documentation. As soon as the build is done, you can go to localhost:8080/samples (opens new window) to see the samples.

开箱即用的工作样本

¥Out of the box working samples

这些样品仅供演示之用。如果你将它们复制粘贴到你自己的网站中，它们将无法立即使用。这是因为文档的构建方式。一些样板代码被隐藏。可以直接复制粘贴使用的示例可以查看 使用页面。

¥These samples are made for demonstration purposes only. They won't work out of the box if you copy paste them into your own website. This is because of how the docs are getting built. Some boilerplate code gets hidden. For a sample that can be copied and pasted and used directly you can check the usage page.

自动生成的数据

¥Autogenerated data

示例中使用的数据是使用自定义函数自动生成的。这些函数不随库一起提供，有关这方面的更多信息，你可以查看 实用程序页面。

¥The data used in the samples is autogenerated using custom functions. These functions do not ship with the library, for more information about this you can check the utils page.

动作块

¥Actions block

这些示例具有 actions 代码块。这些操作不是 Chart.js 的一部分。它们通过我们在文档中使用的插件在内部转换为单独的按钮以及 onClick 监听器。要自己实现此类操作，你可以制作一些按钮并向它们添加 onClick 事件监听器。然后在这些事件监听器中，你可以调用你制作图表的变量并执行按钮应该执行的逻辑。

¥The samples have an actions code block. These actions are not part of Chart.js. They are internally transformed to separate buttons together with onClick listeners by a plugin we use in the documentation. To implement such actions yourself you can make some buttons and add onClick event listeners to them. Then in these event listeners you can call your variable in which you made the chart and do the logic that the button is supposed to do.