# 贡献

欢迎对库进行新的贡献,但我们要求您遵循以下指南

  • 在为重大新增或更改打开 PR 之前,请通过创建问题 (在新窗口中打开) 或在Chart.js Discord (在新窗口中打开) #dev 频道中进行讨论。这将通过提前获得反馈来节省您的开发时间,并通过向维护者提供更多上下文和详细信息来加快审查速度。
  • 考虑您的更改是否对所有用户都有用,或者创建一个 Chart.js 插件 是否更合适。
  • 检查您的代码是否通过测试和 eslint 代码标准。pnpm test 将同时为您运行 linter 和测试。
  • 添加单元测试并记录新功能(分别在 test/docs/ 目录中)。
  • 除非有即将发布的重大版本(这种情况很少见),否则避免更改现有代码。我们鼓励人们为最先进的新功能编写插件,并非常重视向后兼容性。
  • 我们强烈建议尽可能将新方法添加为私有方法。可以通过将顶级 function 放在类外部,或在类内部将方法名前缀添加 _ 并添加 @private JSDoc 来将方法设为私有方法。公共 API 需要花费相当多的时间来审查,并且一旦实现就会被锁定,因为我们无法在不破坏向后兼容性的情况下对其进行更改。私有 API 允许灵活地解决不可预见的情况。

# 加入项目

活跃的贡献者和贡献者被邀请自我介绍并请求对该项目的提交访问权限。我们有一个非常活跃的 Discord 社区,您可以在这里加入 (在新窗口中打开)。如果您认为自己可以提供帮助,我们很乐意邀请您加入!

# 构建和测试

首先,我们需要确保开发依赖项已安装。安装 node 和 pnpm 后,将 Chart.js repo 克隆到本地目录,并在命令行中导航到该目录,我们可以运行以下命令

> pnpm install

这将安装 Chart.js 的本地开发依赖项。

现在,可以从存储库根目录使用以下命令

> pnpm run build             // build dist files in ./dist
> pnpm run autobuild         // build and watch for source changes
> pnpm run dev               // run tests and watch for source and test changes
> pnpm run lint              // perform code linting (ESLint, tsc)
> pnpm test                  // perform code linting and run unit tests with coverage

pnpm run devpnpm test 可以附加一个用于匹配规范文件名的字符串。例如:pnpm run dev plugins 将以监视模式启动 karma 以运行 test/specs/**/*plugin*.js

# 文档

我们使用 Vuepress (在新窗口中打开) 来管理文档,文档包含在 docs 目录中作为 Markdown 文件。您可以使用以下命令在本地运行文档服务器

> pnpm run docs:dev

# 基于图像的测试

一些与显示相关的功能很难通过典型的 Jasmine 单元进行测试。为此,我们引入了基于图像的测试 (#3988 (在新窗口中打开)#5777 (在新窗口中打开)) 来断言图表是以像素为单位绘制的,与预期图像匹配。

在基于图像的测试中生成的图表应尽可能简化,并只关注测试的功能,以防止其他功能出现问题时测试失败(例如,在测试刻度时禁用标题和图例)。

您可以按照以下步骤创建一个新的基于图像的测试

  • 创建一个 JS 文件 (示例 (在新窗口中打开)) 或 JSON 文件 (示例 (在新窗口中打开)),其中定义了图表配置和生成选项。
  • 将此文件添加到 test/fixtures/{spec.name}/{feature-name}.json 中。
  • 如果 test/specs/{spec.name}.tests.js 中不存在,请在开头添加 describe line (在新窗口中打开)
  • 运行 pnpm run dev
  • 单击“调试”按钮(右上角):测试应失败,并显示相关的画布。
  • 右键单击图表并“将图像另存为...” test/fixtures/{spec.name}/{feature-name}.png,确保不激活工具提示或任何悬停功能
  • 刷新浏览器页面(CTRL+R):测试现在应该通过
  • 通过在 JSON 文件中略微更改功能值来验证测试相关性。

测试应该在两个浏览器中都通过。一般来说,我们隐藏了所有图像测试中的文本,因为在不同浏览器之间很难让它们通过。因此,建议在基于图像的测试中隐藏所有刻度。建议还禁用动画。如果测试仍然没有通过,请调整 tolerance 和/或 threshold (在新窗口中打开),并将它们保持在尽可能低的水平

测试失败时,将显示预期图像和实际图像。如果您希望在测试通过时查看图像,请在 JSON 文件中设置 "debug": true

# 错误和问题

请在 GitHub 页面上报告这些问题 - 在 github.com/chartjs/Chart.js 上。请不要使用问题来提出支持请求。有关如何使用 Chart.js 的帮助,请查看 chart.js (在新窗口中打开) 标签在 Stack Overflow 上。

结构良好、详细的错误报告对项目非常有价值。

报告错误的指南

请提供与 bug 相关的任何其他详细信息,例如它是否是浏览器或屏幕密度特定问题,或者是否只在特定配置或数据下发生。

最后更新: 2024年5月17日 下午12:33:38