*

【jQuery】Chart.jsを使って簡単にカッコイイレーダーチャートを実装するの巻

公開日: : 最終更新日:2015/05/08 how to, ウェブ・ネット・PC(パソコン), サーバ・プログラム

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

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


line

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




jQueryを使ったchart.jsとは?


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

ライブラリ -Wikipedia

適当に抜粋すると

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

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

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


Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)
西畑一馬
アスキー・メディアワークス
売り上げランキング: 41,738

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

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


完成形をまず見てみる


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

tya-to

デモサイト

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

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



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


まずは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です。

今回は便宜上どっちもインクルードしてたりするけど、基本はどっちかひとつ(使う方だけ)でいいからね。





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


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

chart.js公式サイト

chart01

chart02

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


  • Chart.js

だけを使います。



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


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

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

dere

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

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

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



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


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


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

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

dere

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


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


<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Chart.jsの実装</title>
</head>

<body>
   <h1>見出し</h1>
</body>

</html>

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


<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<script src="jquery-2.1.1.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<script src="Chart.js"></script>

<title>Chart.jsの実装</title>
</head>

<body>
   <h1>見出し</h1>
</body>

</html>

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

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

jquery-2.1.1.js

から

jquery-2.1.2.js

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


<script src="jquery-2.1.2.js"></script>
<script src="jquery-2.1.2.min.js"></script>

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


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


<script src="js/jquery-2.1.2.js"></script>
<script src="js/jquery-2.1.2.min.js"></script>

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




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


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

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

見出しも変えて


<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<script src="jquery-2.1.1.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<script src="Chart.js"></script>

<title>Chart.jsの実装</title>
</head>

<body>
   <h1>オタク総合力</h1>

</body>

</html>


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

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


<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<script src="jquery-2.1.1.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<script src="Chart.js"></script>

<title>Chart.jsの実装</title>
</head>

<body>
   <h1>オタク総合力</h1>

   <!-- チャートが描画される場所-->
   <canvas id="canvas" width="300px" height="300px">
   </canvas>

</body>

</html>

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

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

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


<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<script src="jquery-2.1.1.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<script src="Chart.js"></script>

<title>Chart.jsの実装</title>
</head>

<body>
   <h1>オタク総合力</h1>

   <!-- チャートが描画される場所-->
   <canvas id="canvas" width="300px" height="300px">
   </canvas>

<script>
// レーダーチャートの情報を書いていく場所

</script>

</body>

</html>

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

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

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




完成形


<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<script src="jquery-2.1.1.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<script src="Chart.js"></script>

<title>Chart.jsの実装</title>
</head>

<body>
   <h1>オタク総合力</h1>

   <!-- チャートが描画される場所-->
   <canvas id="canvas" width="300px" height="300px">
   </canvas>

<script>
$(function() {
// チャートの枠組み
var radarChartData = {
// 項目
  labels: ["アニメ系", "アイドル系", "電車系", "メカ・PC系", "ゲーム系"],
  datasets: [
  {
   // 透明を使いたいのでRGBAで色を再現→rgba(xxx,xxx,xxx,0.5):透過度50%
   fillColor: "rgba(244,250,130,0.7)",	// チャート内の色
   strokeColor: "#111111",	// チャートを囲む線の色
   pointColor: "#111111", 	// チャートの点の色
   pointStrokeColor: "#fff",	// 点を囲む線の色
   // 各項目の値
   data: [6,8,2,9,6]
   }
             ]
   };

   // レーダーチャートの目盛とかの設定
   var canvas = document.getElementById("canvas");
   var context = canvas.getContext("2d");
   var chart = new Chart(context);
   var rader = chart.Radar(radarChartData, {
   scaleShowLabels: true,  // 目盛を表示(true/false)
   pointLabelFontSize : 10, // ラベルのフォントサイズ
   scaleOverride : true, // 目盛の最大値を手動設定(true/false)
   scaleSteps : 10, // 目盛の数
   scaleStartValue : 0, // 目盛の最初の数
   scaleStepWidth : 1, // 目盛の間隔
   // 目盛の最大値の計算:scaleSteps(目盛の数)→5 scaleStepWidth(目盛の間隔)→2 だと5×2で最大値は10
   });
   });
	  
</script>

</body>

</html>

関連記事

お金がなくて、時給が低いことの楽しさ

こんなサイトをたまたま見つけました。 はじめての自作PCで自宅サーバーをはじめた PCケ

記事を読む

【apacheモジュール】mod_pagespeedのキャッシュの削除の仕方

あいも変わらずgoogle先生はとんでもないものを作りますね!! インストールするだけ! お手

記事を読む

注文住宅(マイホーム)購入ならスーモカウンターがおすすめ(賛否あるけど) 1/3

注文住宅紹介サービス「スーモカウンター」とは? 現在注文住宅を建てようと計画中です。 貧

記事を読む

【覚書】 WordPress 301 リダイレクト URL変更 htaccess 下層ページ そのまま

このブログのURLを http://www.takahashi-takuro.com か

記事を読む

【Chromebook】ASUS製 Flip C100PA-RK3288 タッチパネル/10.1インチ 開封の儀

こんな自分の物欲の言い訳のためだけの記事を書いてですね。 「いま、IS01を想う。」に想う。。

記事を読む

【PHP】時間を扱うときはdate_default_timezone_set(‘Asia/Tokyo’);を入れよう

タイトルそのまんま。そんだけ。 日本国内のサービスでphpで時間を扱うときは、サーバの設定いじ

記事を読む

注文住宅(マイホーム)購入ならスーモカウンターがおすすめ(賛否あるけど) 2/3

注文住宅(マイホーム)購入ならスーモカウンターがおすすめ(賛否あるけど) 1/3

記事を読む

lightbox クリック前

lightbox(ライトボックス)のie9のバグの修正方法(って言っても新しいバージョン入れなおすだけ)

lightboxっていう無料のJavaScriptがあるの知ってますか? lightboxダウ

記事を読む

【WordPress】Contact Form 7の追加プラグイン「Contact Form 7 DatePicker」便利だけど手動入力されたときにエラー吐いちゃうのの対策

便利なプラグインContact Form 7の追加プラグイン「Contact Form 7

記事を読む

【WordPress】Contact Form 7でEnterキーを押すと勝手に送信されてしまう問題を解決する魔法のコード(JavaScript)

アイキャッチ画像はギャグとして(笑) 就職活動中の女子大生にJavaとJavaScri

記事を読む

Comment

  1. […] 【jQuery】Chart.jsを使って簡単にカッコイイレーダーチャートを実装するの巻 […]

Message

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

  • 高橋拓郎(31歳)
    愛知県知多市生まれ。
    大学在学中に個人で始めた事業を、大学院中退後法人化(法人化のために中退が正しいかも)。
    簡単にコンタクトとれるのでt@takuro.infoまで何か御用があればなんなりと。
    ブログの感想やご意見も大歓迎です!
【ユーザー車検】軽トラを無料でGETしたけど車検代が無いから初の軽自動車ユーザー車検に挑戦!

青春カーと悲しい別れ どうも。貧乏が板に付いてきて久しい僕で

【LINEbot】LINEbotが作れるからphpで作ってみたの巻 ~さくらの共有SSLでも動くよ~

BOT API Trial Accountってのが、公開されたので、L

【電気自動車】日産リーフの無料モニターに当選して2週間使ってみたけれども。。。結論的に購入は時期尚早??

どうも。実写版とってもラッキーマンこと僕です! とっても!ラッキ

追尾メニューのAdSense削除の件

このサイトへのお問い合わせで、以下のような内容のご指摘を頂きました。

【Chromebook】ASUS製 Flip C100PA-RK3288 タッチパネル/10.1インチ 開封の儀

こんな自分の物欲の言い訳のためだけの記事を書いてですね。 「いま

→もっと見る

PAGE TOP ↑