ウェブサイトにGithub投稿グラフを埋め込む

Question

GithubコントリビューショングラフをHTML5に埋め込む方法はありますか？

Answer 1

私はそれを行うためのJavaScriptライブラリを作成しました：github-calendar。

Here

は、それを使用する方法の例です：

<!-- Prepare a container for your calendar. --> 
<script 
    src="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.min.js" 
> 
</script> 

<!-- Optionally, include the theme (if you don't want to struggle to write the CSS) --> 
<link 
    rel="stylesheet" 
    href="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.css" 
/> 

<!-- Prepare a container for your calendar. --> 
<div class="calendar"> 
    <!-- Loading stuff --> 
    Loading the data just for you. 
</div> 

<script> 
    new GitHubCalendar(".calendar", "your-username"); 
</script> 

Hereあなたがアクションでそれを見ることができます：基本的に

、我々はクロスドメインリクエストを必要とするので、私たちはプロキシを必要とします。それはGitHubのプロフィールページ（github.com/<user>）へのリクエストを作成し、そこから必要なものを返します。

詳細については、documentation on GitHubをご覧ください。

Answer 2

あなたは、次のURLからHTMLをこすりすることができますhttps://github.com/users/<username>/contributionsと、あなたのページの上に置きました。

Answer 3

この男：http://www.rshah.org/はGithubチャートAPIを書いています。これは間違いなく助けてくれるでしょう：http://ghchart.rshah.org/。それだけではHTMLだけなので、クリーナーを手に入れることはできませんでした。 あなたのユーザ名とaltタグを変更してください。

Answer 4

私は次の操作を行って、角度4でこれを達成することができました：

1. @jianweichuah https://github.com/users/<username>/contributionsで言及したURLにHTTP GETリクエストを行います。

2. github-calendarライブラリと同じようにCORSの問題を解決するには、プロキシが必要です。 proxy-url/https://github.com/users/<username>/contributions

3. それをテンプレートに戻してください。

悲しいことに、すべての情報を簡単に取得することはできませんが、SVGの詳細にあります。

ここに私の正確なステップの書き方があります：https://www.chiangs.ninja/blog/ そして、GitHubタブのメインサイトの例です。私はGitHub APIから自分のユーザー情報を取得し、グラフの周りに配置しました。