DAICHIFIVE^™ blog+

html5.jpで配布されているJavascriptライブラリから、canvas要素にレーダーチャートを描くスクリプトを実装してみました。

自己紹介ページで、自分のスキルとかをグラフっぽく表示している人をたまに見かけます。自分だったらレーダーチャートがいいな、と思っていたところ、html5.jpさんで随分前から配布されているスクリプトが目に止まりました。たまたま、うちのサイトもHTML5だったので、とりあえず導入してみました。
完成したページはこちら：SKILL | DAICHIFIVE

ダウンロード＆使い方

以下のページからダウンロードできます。日本語で丁寧に説明がされているので、比較的簡単に設置できると思います。
レーダーチャート – JavaScript ライブラリー – HTML5.JP

グラフを2つ表示したい場合

1画面に複数のグラフを表示させたい場合は、別のIDをつけたcanvas要素をもうひとつ用意して、Javascriptも変数名を変えてもうひとつ用意すればOKです。

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

<!--[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);
 
  var rc2 = new html5jp.graph.radar("sample2");
  if( ! rc2 ) { return; }
  var items2 = [
    ["商品A", 5, 2, 4, 5, 3, 2, 4, 4],
    ["商品B", 3, 4, 3, 4, 5, 4, 5, 1]
  ];
  var params2 = {
    aCap: ["安さ", "性能", "デザイン", "人気", "使いやすさ", "寿命", "軽さ", "強さ"]
  }
  rc2.draw(items2, params2);
};
</script>

おまけ：canvas要素の背景を消す

デフォルトでは、canvas要素の背景色（backgroundColor）は#ffffffです。自分のサイトでは、背景に写真が敷いてあったので、この写真を隠したくないと思い、いろいろ試してみました。そしたら、できました。

backgroundColor: ""

色を指定せずに、空を指定すると、背景が消えます。同じように、チャート領域の背景色も空にしてみましたが、こちらは真っ黒になり、透明になりませんでした。