2013.12.24

アニメーション付きのグラフがJSで作れる!Chart.jsの使い方

posts_photo
Chart.js

このたび有名なグラフ作成プラグインであるChart.jsを触ってみました。グラフを画像ではなくJSで、しかもリッチなアニメーション付きで簡単に作れるなんて便利!更新頻度の高いグラフが必要なときにぜひ使いたいプラグインです。

6種類のグラフが作れます

posts_photo
このプラグインでは6種類のグラフを作る事ができます。ドーナツグラフ、線グラフ、鶏頭図、棒グラフ、円グラフ、レーダーチャートの6つです。今回は円グラフの設定を紹介しようと思います!

グラフを作る準備!

まずは公式サイトからchart.jsをダウンロードしてきます。準備はこれだけで大丈夫です!あ、でもcanvasを使うのでHTML5で書く必要があります。

<script src="Chart.js"></script>

円グラフを作ろう!

ここでは、円グラフの設定の仕方を紹介しようと思います。全6種のグラフの詳しい設定の仕方は、公式のドキュメントサイトがあるので下記からどうぞ。
Chart.js Documentation

HTMLの記述は最低限これだけです。ここにjavascriptの記述を追加していきます。

<!doctype html>
<html>
<head>
  <title>円グラフを作ろう</title>
  <script src="Chart.js"></script>
</head>
<body>
<canvas id="canvas" height="450" width="450"></canvas>
</body>
</html>

下記のスクリプトを</body>タグの直前に記述します。変数dataには1項目の数値と色を入れていきます。

var data = [
{
  value: 30,
  color:"#F38630"
},
{
  value : 50,
  color : "#E0E4CC"
},
{
  value : 100,
  color : "#69D2E7"
}			
]
var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(data);

描画に関するオプションもいくつか用意されていて、例えば速度の調整をしたい場合は下記のように記述します。

var data = [
{
  value: 30,
  color:"#F38630"
},
{
  value : 50,
  color : "#E0E4CC"
},
{
  value : 100,
  color : "#69D2E7"
}			
]
//オプションの設定を変数に入れていきます。
var options={
animationSteps : 300
}
var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(data,options);

ほかにもいろいろオプションがついているので、いろいろ試してみるのも面白いですよ!
より詳しい解説や、デモは下記公式ページで確認してみてください。では!

伝わるインフォグラフィックス
伝わるインフォグラフィックス
ー Amazon.co.jpで買う


記事のタグ一覧:,

スポンサードリンク

関連記事

カテゴリー内のおすすめ記事