off.html5.jpのcanvas要素にレーダーチャートを描くJavaScriptを実装してみた2010年8月1日html5.jpで配布されているJavascriptライブラリから、canvas要素にレーダーチャートを描くスクリプトを実装してみました。自己紹介ページで、自分のスキルとかをグラフっぽく表示している人をたまに見かけます。自分だったらレーダーチャートがいいな、と思っていたところ、html5.jpさんで随分前から配布されているスクリプトが目に止まりました。うちのサイトもHTML5だったので、とりあえず導入してみました。以下のページからダウンロードできます。日本語で丁寧に説明がされているので、比較的簡単に設置できると思います。HTML5.JPグラフを2つ表示したい場合1画面に複数のグラフを表示させたい場合は、別のIDをつけたcanvas要素をもうひとつ用意して、Javascriptも変数名を変えてもうひとつ用意すればOKです。params2);};</script>おまけ:canvas要素の背景を消すデフォルトでは、canvas要素の背景色(backgroundColor)は#ffffffです。自分のサイトでは、背景に写真が敷いてあったので、この写真を隠したくないと思い、いろいろ試してみました。""色を指定せずに、空を指定すると、背景が消えます。同じように、チャート領域の背景色も空にしてみましたが、こちらは真っ黒になり、透明になりませんでした。アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。