インソースマーケティングデザイン
2014.11.05 システム
めくるめくJavaScriptライブラリの世界 ～Chart.js
こんにちは、システムエンジニアの福田です。
さて、様々なデータを扱っていますと避けて通れないのが「グラフ」であります。
とある数値の推移を棒グラフにしたり、割合を円グラフにしたりと・・・一昔前ならFlashで、大昔ならテーブルで実現してきたと思いますが、昨今ではJavaScriptでサクっとクールにグラフを描画することができるようになっております。
今回はそんなグラフ描画用のライブラリ「Chart.js」を紹介致します。
http://www.chartjs.org/
※MIT License
さて、今回は面倒な「円グラフ」を描いてみたいと思います。
まずは上記サイトから「Chart.js」をダウンロードして、下記のコードをHTMLとして保存します。
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<!– Chart.jsインクルード –>
<script src=”./js/Chart.js”></script>
</head>
<body>
<!– グラフ描画エリア –>
<canvas id=”pieArea” height=”200″ width=”200″></canvas>
<script>
// 円グラフ用データ
var datasets = [
{value:10,color:”#f39700″},
{value:20,color:”#e60012″},
{value:30,color:”#00a7db”},
{value:40,color:”#9caeb7″}
];
// 円グラフ描画
var myPie = new Chart(document.getElementById(“pieArea”).getContext(“2d”)).Pie(datasets);
</script>
</body>
</html>
上記のHTMLをブラウザで開くと・・・
このようなグラフが表示されます。
画像だと分かりにくいかと思いますが、表示されるときに「くるん！」とアニメーションもしてくれます。
※もちろんアニメーションのOn/Offも可能です。
他にも、棒グラフやレーダーチャート等々「六種類」のグラフを描画することができる「Chart.js」。
表現の幅が広がること請け合いのライブラリです。
