友達の結婚式のプロフィールムービーが終わって一息ついていた頃。。。

いつもお世話になっている弁護士先生から

との連絡が来たので早速取り掛かる話です。

jQueryを使ったchart.jsとは？

前にもいくつか紹介しましたjQueryとはJavaScriptのライブラリで、ライブラリとはなんぞや、となるとめんどくさいので、wikiでも見ておいて

ライブラリ -Wikipedia

適当に抜粋すると

汎用性の高い複数のプログラムを、再利用可能な形でひとまとまりにしたものである。一般にライブラリは、それ単体ではプログラムとして動作させることはできないので実行ファイルではない。

よけい意味がわからないかもだけど、jQueryで言えば

JavaScriptの超便利な拡張機能で、少ないコードでいろんなことができるやつってさらにわかりにくくなったことで、説明は諦めます。

まあ実際に次から見ていって！

で、今回はjQueryを使ったchart.jsってのを使ってレーダーチャートをサイトに簡単に実装していく方法を書いていきます。

完成形をまず見てみる

まずは実際にどういったものかというとこちら

デモサイト

こんな感じでいわゆるレーダーチャートをサイト内に実装できると様々な場面でいろいろ使えて便利だよね！って話です。はい。

で、次の章から実際の実装方法を説明していきます。

【下準備】jQueryをダウンロード

まずはjQueryのファイルを公式サイトからダウンロードしましょう。

まずjQueryはここからダウンロードします。

jQueryダウンロードページ

いろいろありますが一応最新のjQuery 2.x系のほうが何かといいでしょうね。

※今回に限らず、こういった時は特別な事情があって旧バージョンを使う必要がどうしてもあるという場合以外は最新版を使いましょう！

そうすると現在（2014.11.11時点）では

• jquery-2.1.1.js
• jquery-2.1.1.min.js

という2つのファイルが手に入ります。

「min」ってのは、一般に余計な改行やcommentなどを削除して最小化したファイルのことです。

改変せずにそのまま使う場合はminのほうを。

自分でカスタマイズして改変したりするために見やすいほうが良い場合は無印のほうを、なんて考えでとりあえずOKです。

基本はどっちかひとつ（使う方だけ）でいいですが、ページの表示速度は当然容量の小さいminのが良いからね。

【下準備】chart.jsをダウンロード

続いてchart.jsも同様に公式サイトからダウンロードします。

chart.js公式サイト

ダウンロードしたzipファイルを解凍するといろんなファイルがあっていろんなオプション時に使ったりするのですが今回はわかりやすくするために

• Chart.js

だけを使います。

【下準備】それぞれのファイルをサーバーにぶち込む

ほんでそれぞれのダウンロードしたファイルを実装したいサイトが有るサーバーにぶち込みます。

一応今回は新しく作ったのでディレクトリ構造はこんな感じです。

※ごめんミスで、jquery-2.1.1.jsとjquery-2.1.1.min.js両方入れちゃったけど、片方（今回はmin）だけで良いからね。

実際は今運用しているサイトであれば他にもたくさんファイルはあるでしょう。

またディレクトリも/cssや/imgとかね。

更に/jsなんかでJavaScriptファイルをまとめている場合は今回もそこに入れておいたほうが後々わかりやすいし整理がし易いのでそのへんはご自由に。

【下準備】実装したいhtmlファイルでChart.jsをインクルード

まだ下準備かよ！と思うかもですが、ボクのような凡人は人生のほとんどは下準備なので、諦めずに頑張ってね。

ダウンロードしてきたjQueryの2つと「Chart.js」をインクルードします。

と、業界用語を使って偉そうにしておりますが、ようは実装したいHTMLファイルのheadタグにjsファイルを読み込むように指定してあげるだけです。

今回はこれの「index.html」ね。

で、わかりやすいように必要最低限一番シンプルなhtmlでこんなかんじで造りました。

見出し

で、繰り返しですがこれにダウンロードしてサーバに置いたjQueryとchart.jsをインクルードします。

見出し

ここで注意が2点あります。当たり前ですがjQueryはダウンロードしたバージョンと一致したファイル名を指定しないとダメです。

この記事を見て上のソースコピペしても、自分がダウンロードしたjQueryが

jquery-2.1.1.min.js

から

jquery-2.1.2.min.js

にバージョンアップされてたら、インクルードするときも

としないとダメですよ。ボクみたいなゆとり世代は言われたことをそのままやるだけで応用力がないのでこういうことはよくやります。

もう一点は前の章で話したサーバーに打ち込むとき/jsディレクトリに入れたりした場合も同様にインクルードするときは

とする必要があるので注意です。

【実装編】JavaScriptを書いていこう

ここまで来てようやく実装編です。

今回はレーダーチャートで「オタク総合力」というクソどうでもよいものを作っていこうと思います。

見出しも変えて

オタク総合力

まず、チャートを描画する領域を<canvas>タグを使って作ります。

width（横幅）とheight（縦幅）は指定が必要ですので、適当なサイズでお願いします。

オタク総合力

<canvas>タグのidをcanvasというので指定しています。

で、このidの紐付けしたJavaScriptを書いていきます。

場所はこんなかんじでscriptタグ内です。

オタク総合力

で、ちょっとめんどくさくなってきたので、一気に書いちゃいますね。

コメントアウトでどこをいじるとどこが変わるのか、ある程度詳しく書いておきましたのでそれを参考に自由にカスタマイズしてください。

また、ここでは最低限のオプションだけしか実装していないのでさらに詳細に弄りたい人は色々とググッて調べて見てね！

完成形

オタク総合力