chart.js で Qiita:Team / esa / DocBase を比較するレーダーチャートを作成（凡例付）

![knowledge_logos.png](https://qiita-image-store.s3.amazonaws.com/0/43480/196cca54-639b-49b0-5923-95c7d6dcd221.png)
## <i class="fa fa-cubes" style="font-size:1em;"></i> 概要
chart.js で Qiita:Team / esa / DocBase を比較するレーダーチャートを作成（凡例付）します。

## <i class="fa fa-warning" style="font-size:1em;"></i> 注意事項
* グラフの内容は適当です。あくまで三者比較をするお題が欲しかっただけです。

実際の Qiita:Team, esa, DocBase の機能については後述のリンクを参照ください。

## <i class="fa fa-flask" style="font-size:1em;"></i> サンプル

~~~html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Qiita:Team / esa / DocBase の比較</title>
  <style>
    #legend {
        padding: 10px;
        overflow: hidden;
        position: relative;
    }
    ul.pie-legend {
        list-style: none outside none;
        float: left;
        margin: 0 0 0 0;
        padding: 0;
        position: relative;
        left: 50%;
    }
    ul.pie-legend > li {
        float: left;
        margin-right: 5px;
        padding: 5px;
        position: relative;
        left: -50%;
    }
  </style>
  <script src="Chart.min.js"></script>
  <script language="JavaScript"><!--
  function displayPieChart() {
    var data = {
        labels: ["デザイン", "フィードバック", "フロー", "ストック", "大規模利用", "コスト"],
        datasets: [
            {
                label: "Qiita:Team",
                fillColor: "rgba(200,0,0,0.2)",
                strokeColor: "green",
                pointColor: "green",
                pointStrokeColor: "green",
                pointHighlightFill: "green",
                pointHighlightStroke: "green",
                data: [4, 3, 5, 2, 4, 3]
            },
            {
                label: "esa",
                fillColor: "rgba(200,0,0,0.2)",
                strokeColor: "red",
                pointColor: "red",
                pointStrokeColor: "red",
                pointHighlightFill: "red",
                pointHighlightStroke: "red",
                data: [5, 5, 2, 5, 3, 3]
            },
            {
                label: "DocBase",
                fillColor: "rgba(200,0,0,0.2)",
                strokeColor: "yellow",
                pointColor: "yellow",
                pointStrokeColor: "yellow",
                pointHighlightFill: "yellow",
                pointHighlightStroke: "yellow",
                data: [3, 4, 2, 5, 5, 3]
            }
        ]
    };
    var ctx = document.getElementById("radarChart").getContext("2d");
    var options = { 
      legendTemplate : "<% for (var i=0; i<datasets.length; i++){%><span style=\"background-color:<%=datasets[i].strokeColor%>\">&nbsp;&nbsp;&nbsp;</span>&nbsp;<%if(datasets[i].label){%><%=datasets[i].label%><%}%><br><%}%>"
    };
    var radarChart = new Chart(ctx).Radar(data, options);
    document.getElementById("legend").innerHTML = radarChart.generateLegend();
  }
  --></script>
</head>
<body onload="displayPieChart();">
  <div class="box">
    <canvas id="radarChart" height="450" width="450"></canvas>
    <div id="legend"></div>
  </div>
</body>
</html>
~~~

![knowledge_compare.png](https://qiita-image-store.s3.amazonaws.com/0/43480/43de32ff-281d-7148-2990-ce88eaf433b2.png)

## <i class="fa fa-github" style="font-size:1em;"></i> GitHub
[Chart.js レーダーチャートサンプル GitHub](https://gist.github.com/tbpgr/3385c257a603d39710bb)

## <i class="fa fa-check-circle" style="font-size:1em;"></i> デモ
[Chart.js レーダーチャートサンプル](http://bl.ocks.org/tbpgr/3385c257a603d39710bb)

## :books: Qiita:Team / esa / DocBase 資料
### <i class="fa fa-users" style="font-size:1em;"></i> 情報共有ツール全般
* <i class="fa fa-external-link" style="font-size:1em;"></i> [徹底討論！社内の技術情報共有ツール - GitHub Wiki, Qiita:Team, esa.io](http://blog.otakumode.com/2014/09/30/sidonia-night-part4/)

### :ear: Qiita:Team
* <i class="fa fa-external-link" style="font-size:1em;"></i> [Qiita:Teamを使って埋もれたマイ技術メモを有効活用しよう！](http://blog.nanapi.co.jp/tech/2014/01/08/share-my-technical-memo-using-qiita-team/)
* <i class="fa fa-external-link" style="font-size:1em;"></i> [Qiita:Teamはこれまで使った情報共有ツールの中で一番良い](http://kkino.hatenablog.com/entry/2014/03/20/080946)
* <i class="fa fa-external-link" style="font-size:1em;"></i> [Qiita:Team を導入して2週間たったので KPT をしてみた](http://kakakakakku.hatenablog.com/entry/2014/11/15/180546)

### :baby_chick: esa.io
* <i class="fa fa-external-link" style="font-size:1em;"></i> [ゆるふわ系ドキュメント共有サービス『esa.io』を使ってみた](http://lab.aratana.jp/entry/2015/02/09/182156)
* <i class="fa fa-external-link" style="font-size:1em;"></i> [esa.io でゆるふわ情報共有 - Middleman Blog への Export サンプル付き](http://qiita.com/tbpgr/items/779e6eea9e9dec24e273)
* <i class="fa fa-external-link" style="font-size:1em;"></i> [esa.io と DocBase を比較してみた](http://tbpgr.hatenablog.com/entry/2015/01/09/000037)
* <i class="fa fa-external-link" style="font-size:1em;"></i> [Qiita:Team と比較して esa.io の方が圧倒的に優れてる機能3点 (\\( ⁰⊖⁰)/)](http://kakakakakku.hatenablog.com/entry/2015/02/17/231826)

### <i class="fa fa-square" style="font-size:1em;"></i> DocBase
* <i class="fa fa-external-link" style="font-size:1em;"></i> [情報共有ツール『DocBase』で開発チームが幸せになれそうな予感](http://lab.aratana.jp/entry/2014/12/29/232547)
* <i class="fa fa-external-link" style="font-size:1em;"></i> [「小さなメモから始めて、チームを育てる 」 DocBase をさわって基本機能や特徴をまとめてみた](http://tbpgr.hatenablog.com/entry/2015/01/08/234510)

## :books: 外部資料
* <i class="fa fa-external-link" style="font-size:1em;"></i> [chart.js docs](http://www.chartjs.org/docs/#getting-started-global-chart-configuration)