JavaScriptでレーダーチャートを描画する

JavaScriptレーダーチャート

サッカー選手の能力をレーダーチャートで表現したかったので、検索した方法で実装しました。

 

このサイトを参照

まずはライブラリをダウンロード

※クリックでダウンロードされます

解凍後の手順

下記JSファイルをheadタグ内で読み込ませ、処理を記述します。

  • html5/excanvas/excanvas.compiled.js
  • html5/excanvas/excanvas.js
  • html5/graph/excanvas.compiled.js
<!--[if IE]><script type="text/javascript" src="../html5jp/excanvas/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="../html5jp/graph/radar.js"></script>
<script type="text/javascript">
window.onload = function() {
  var rc = new html5jp.graph.radar("sample");
  if( ! rc ) { return; }
  var items = [
    ["商品A", 5, 2, 4, 5, 3, 2, 4, 4],
    ["商品B", 3, 4, 3, 4, 5, 4, 5, 1]
  ];
  var params = {
    aCap: ["安さ", "性能", "デザイン", "人気", "使いやすさ", "寿命", "軽さ", "強さ"]
  }
  rc.draw(items, params);
};
</script>

その後、グラフを表示したい箇所に下記処理を記載します。

<div><canvas width="400" height="300" id="sample"></canvas></div>

最低限の機能を備えたレーダーチャートを作成できました。
ちなみにオプションで凡例は非表示にしています。