LoginSignup
6

More than 5 years have passed since last update.

Qiita要望 | 【運営さん手間いらずの実装コード付】ユーザートップページにあるパイチャートから該当ユーザーのカテゴリ別検索結果へのリンクを追加 #qiita

Last updated at Posted at 2014-10-07

Qiita要望 | 【運営さん手間いらずの実装コード付】ユーザートップページにあるパイチャートから該当ユーザーのカテゴリ別検索結果へのリンクを追加

要望詳細

ユーザートップページにあるパイチャートから該当ユーザーのカテゴリ別検索結果へのリンクを追加して欲しいです。
A さんの Ruby の記事の一覧を見たい。
B さんの PHP の記事の一覧を見たい。
などのユースケースを想定しています。

動作確認済みの修正コードを添付します。

修正コード例

//******** メッセージ ******** のコメント直下が
修正箇所になります。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>修正サンプル</title>
        <!-- raphaelのimportは省略 -->
        <script>
            window.onload = function () {
                var tagData = [["Ruby",162],["RuboCop",59],["gitlab",37],["Hubot",25],["gitlab-api",20],["kandan",19],["Elixir",18],["Graphviz",17],["reveal.js",14],["rubykaigi",11],["Berkshelf",10],["Rails4",9],["Brainf*ck",8],["GitLab-CI",8],["Guard",6],["orenono",6],["codeiq",6],["Qiita",5],["percol",4],["seq2gif",4],["rubygems",4],["Git",3],["Cygwin",3],["Rails",3],["要望",2],["pip",2],["GitLab-CI-Runner",2],["vagrant",2],["ttyrec",2],["Github-flow",2],["GitHub",2],["RSpec",2],["システム開発",2],["デザインパターン",2],["SublimeText2",2],["VMWare_Workstation",1],["forever",1],["Markdown",1],["TravisCI",1],["Node.js",1],["Cygterm",1],["Growl",1],["yeoman",1],["rails-api",1],["vmware",1],["PHP",1],["QiitaAPI",1],["pidgin",1],["ブレーンストーミング",1],["rbenv",1],["githubflavoredmarkdown",1],["ポモドーロ・テクニック",1],["Perl",1],["microservices",1],["egison",1]];
                var tagName = [];

                // ******** HREF格納用 ********
                var tagHref = [];
                // ******** URLに仕様するユーザーアカウント ********
                var userName = "tbpgr";

                var tagNum = [];
                var tagCount = 0;
                for (var i in tagData) {
                    tagName[i] = "%%.% - " + tagData[i][0];
                    tagNum[i] = parseInt(tagData[i][1]);

                    // ******** タグごとの href の生成 ********
                    tagHref[i] = "https://qiita.com/search?utf8=%E2%9C%93&sort=rel&q=user%3A" + userName + "+tag%3A" + tagData[i][0];

                    tagCount ++;
                }
                var colorList = ["#59BB0C","#7EDB35","#62E65D","#C4ED68","#E2FF9E","#F0F2DD","#D7F6A0","#5DE6A9","#A0D2F6","#80DEF0"];
                var r = Raphael("holder"),
                    pie = r.piechart(100, 100, 80,
                        tagNum,
                        { legend: tagName,
                          // ******** href の設定を追加 ******** 
                          href: tagHref,
                          colors: colorList
                        });

                pie.hover(function () {
                    this.sector.stop();
                    this.sector.scale(1.1, 1.1, this.cx, this.cy);

                    if (this.label) {
                        this.label[0].stop();
                        this.label[0].attr({ r: 7.5 });
                        this.label[1].attr({ "font-weight": 800 });
                    }
                }, function () {
                    this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");

                    if (this.label) {
                        this.label[0].animate({ r: 5 }, 500, "bounce");
                        this.label[1].attr({ "font-weight": 400 });
                    }
                });
            };
        </script>
    </head>
    <body class="raphael">
        <div id="holder"></div>
    </body>
</html>

href 設定を追加しました

この画像からは判断できませんが、パイチャートにカーソルを当てると
指のアイコンになり、クリックするとリンク先にジャンプできるようになりました。

raphaeljs1.png

リンクの確認

raphaeljs2.png

raphaeljs3.png

追加情報

2014/10/26 追記

@suzuki86 さんが開発された Chrome拡張により、
当要望と同等の機能が実現されております。
投稿タイプのタグ名をクリックすると、そのタグが付けられた投稿の一覧ページを表示できる Google Chrome 拡張を作りました

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6