如何在你的 GitHub README 中添加实时星标历史图表

Source: Dev.to

（抱歉，您提供的文本中仅包含来源链接，没有需要翻译的实际内容。如果您能提供要翻译的具体文字，我将很乐意为您完成简体中文翻译。）

免责声明

重要通知： 此应用基于 star-history/star-history 并已进行修改和升级。我们将继续添加更多数据分析功能。我们向原作者致以诚挚的感谢！本文档也已基于原仓库的文档进行修改和完善。

New repository

github-data-analysis-

我们更新了图表实现，并引入了基于 MongoDB 的缓存，以减少 GitHub API 调用并提升性能，且添加了暗色主题。

数据查询和图像下载

我们提供直接的数据查询和图像下载功能，但您需要提供您的 GitHub 个人访问令牌。系统 不会在服务器端存储您的令牌。

直接嵌入图表图片不需要您的令牌，但 GitHub 的速率限制可能会影响使用。我们使用 MongoDB 缓存来尽可能减轻此影响。

为你的 GitHub README 添加实时星星历史图表

现在我们支持在你的 GitHub README 中嵌入实时星星历史图表。上面的截图来自我们自己的 GitHub 数据分析。

在 star‑history.com 主页面查询仓库后会生成一个代码片段；只需将该片段复制到你的 README markdown 文件中。

Embed with “

在审查了流行的网页嵌入实现后，我们选择了 “ 作为容器。它可以在网页上显示原始图表，无需后端服务器，并且保持实时数据的交互性。

由于 GitHub API 对匿名调用者施加了严格的速率限制，用户必须提供自己的个人访问令牌以突破该限制。

Source: …

使用 iframe 嵌入的分步指南

1. 打开 gitdata.xuanhun520.com 并查询仓库。

2. 点击图表下方的 Embed 按钮。

3. 输入你的个人访问令牌。

   

4. 点击 Copy 按钮，然后将生成的 “ 代码片段粘贴到你的网站或博客中。

SVG 格式的实时图表图片

• GitHub 的 markdown 语法 不 允许渲染 “, 因此无法直接在仓库的 README 中嵌入图表。
• 用户必须提供个人访问令牌。虽然令牌从不存储在我们的服务器上（我们没有服务器），但它会出现在页面源码中，这限制了其只能在可信平台上使用（例如内部仪表盘）。

将图表添加到你的 GitHub README 的逐步指南

1. 打开 gitdata.xuanhun520.com 并查询仓库。

2. 向下滚动至操作按钮下方。

   

3. 点击 Copy 按钮复制静态图片 URL。

4. 将 markdown 图片链接粘贴到仓库的 README 中。

全部完成。 😎

结论

我们提供两种方式来嵌入实时星标历史图表：

• 交互式嵌入： 使用 “ 在私有网络或仪表盘上获取可自动调整大小的交互式图表。
• 静态图片： 在公共场所（例如 GitHub README）使用简单的图片链接展示最新图表，例如：

https://gitdata.xuanhun520.com/api/starimg?repos=visactor/vchart&type=Date&theme=dark

未来计划

• 添加更多数据分析功能，例如分叉历史图表和贡献者活动图表。
• 实现用户认证，以支持对私有仓库的分析。
• 引入更多可视化形式，包括信息图表和动画图表。