【JSプラグイン】オシャレなグラフが作れるChart.jsの使い方

【jQuery】オシャレなグラフが作れるchart.jsの使い方

フラットUI的なオシャレ感あふれるグラフが作れるJavaScriptプラグインのchart.jsの基本的な使い方を紹介します。

見た目もオシャレなグラフですが、マウスイベントの時にグイっと動きをつけることも出来るので、サイトに入れておくとアクセントになって非常によい感じです。
jQueryではないので、シンプルでとてもよいですね。

使い方は簡単です。本家サイトのサンプルも充実しているので、簡単に使いこなすことが出来ると思います。

[スポンサーリンク]

このページでやること

Chart.jsの使い方を紹介します。

ダウンロード

こちらのサイトからダウンロードできます。

円グラフを表示するサンプルソース

シンプルなソースですが、これだけで円グラフが表示できます。

<canvas id="canvas" height="450" width="450"></canvas>
<script>
	var pieData = [
			{
				value: 30,
				color:"#F38630"
			},
			{
				value : 50,
				color : "#E0E4CC"
			},
			{
				value : 20,
				color : "#69D2E7"
			}
		];
	var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);
</script>

デモ

実際に動かすことが出来ます

解説

valueが円グラフの割合を定義しています。
colorは色になります。

その他のグラフたち

円グラフ以外にもたくさん種類があるので、ダウンロードしたファイルのsampleを一通りみておくことをオススメします。
chartjs3

さいごに

冒頭でも紹介しましたが、このプラグインはjQueryを使っていないJavaScriptプラグインです。
軽量なプラグインでシンプルなコードがかけるので、わたしは結構重宝しています。

見た目もフラットデザインぽくてとてもよいプラグインだと思います。
業務系アプリでも、こんな感じのプラグインを入れておくと、野暮ったい感じの業務システムにならずにすむかもしれませんね。
それでは!