ちょっとしたデータをサクッと「グラフ」や「チャート」にして、Webページに素早く公開したい人に最適なJavaScriptライブラリ「CanvasJS」のご紹介です！
類似のライブラリはいくつかありますが、「CanvasJS」はわずか数行のコードですぐにグラフが作成でき、なおかつ豊富なパラメータをいじることで驚くほど細かいカスタマイズも実現できるのが特徴的です。
今回は、基本的な使い方を中心にご紹介しようと思います！
必要なファイルを準備しよう！
「CanvasJS」の本体ファイルは、サイトのトップページからダウンロードできますが、CDN経由からも利用できるようになっています。
https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js
これを、HTMLファイルに読み込みます！
// index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CanvasJSサンプル</title>
</head>
<body>
<div id="chartContainer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<script src="app.js"></script>
</body>
</html>
divタグの「chartContainer」へ、これから作成するグラフを描画するようにしたいと思います。あとは、新しくJavaScriptファイル「app.js」を作ったら準備完了です！
基本的な構造を理解しよう！
「CanvasJS」でグラフを作成する場合、まずは以下の基本構文を覚えておきましょう！
// app.js
var chart = new CanvasJS.Chart("chartContainer", {
// ここにグラフ作成処理を書く
});
chart.render();
大まかな流れとしては、先ほどdivタグに設定した「chartContainer」を指定し、グラフ作成処理を書いたら、最後に「render()」を実行することでグラフやチャートが表示されるという感じです。
そして、グラフ作成処理の中身ですが、とりあえずグラフを表示するだけなら、以下のように「グラフの種類」と「データ」を渡してあげるだけでOK！
// app.js
var chart = new CanvasJS.Chart("chartContainer", {
data: [{
// グラフの種類を設定する
type: 'column',
// グラフに描画するデータを設定する
dataPoints: //ここにデータを渡す
}]
});
chart.render();
グラフの種類に関しては、「column(縦棒グラフ)」「bar(横棒グラフ)」「line(折れ線グラフ)」「area(面グラフ)」「pie(円グラフ)」…など、かなり豊富に用意されています。
また、グラフに描画する「データ」は、直接「dataPoints」に書いてもOKですが、通常はデータ量が多いと思うので、別に配列を用意した方が使いやすいと思います。
例えば、こんな感じで…。
// app.js
var dataPlot = [
{ label: "リンゴ", y: 10 },
{ label: "オレンジ", y: 15 },
{ label: "バナナ", y: 25 },
{ label: "マンゴー", y: 30 },
{ label: "グレープ", y: 28 }
];
「label」はグラフに表示する名称で、「y」がY軸の値となっています。
あとは、この「dataPlot」を、先ほどの「dataPoints」に渡してあげれば完成！
See the Pen http://codepen.io/webhacck/pen/YwjmZe/'>[vol.1] Basic sample for Canvasjs.js by webhacck (http://codepen.io/webhacck'>@webhacck) on http://codepen.io'>CodePen.
簡単ですよね？
そして、「type(グラフ種類)」を変更するだけで、さまざまなグラフに一発変換できるのは大きな魅力でもあります！
カスタマイズしてみよう！
さて、ここまでの作業でグラフを表示できたので、もう少しだけカスタマイズしてみたいと思います。
例えば、グラフの「タイトルテキスト」を挿入したければ、「title」という項目を追加します。
title: {
text: 'はじめてのCanvasJS'
},
また、面白いことに「theme」を追記すれば、グラフ全体の「スタイルテーマ」を切り替えることも可能です。
// 'theme1'から'theme4'までスタイルが変化する theme: 'theme2',
また、「width」「height」でグラフのサイズも容易に変更できます。
このようなカスタマイズを簡単にできるサンプルデモを作ったので、ぜひチェックしてみてください！
See the Pen http://codepen.io/webhacck/pen/XXBwQx/'>[vol.2]Basic sample for Canvasjs.js with dat.gui.js by webhacck (http://codepen.io/webhacck'>@webhacck) on http://codepen.io'>CodePen.
あと、先ほどは「データ」を1種類だけ用意していましたが、複数のデータを重ねることも可能で、凡例と一緒に描画することも出来ますよ！
See the Pen http://codepen.io/webhacck/pen/obMKWG/'>[vol.2] Basic sample for Canvasjs.js by webhacck (http://codepen.io/webhacck'>@webhacck) on http://codepen.io'>CodePen.
上記グラフのように、マイナスの数値を入れることも可能です。
このように、カスタマイズは慣れてくると簡単にできるようになり、さらに細かい調整ができるように多数のパラメータが用意されているのも特徴です。
Webページに、手っ取り早くグラフを作ってみたい方や、細かく作りこんだグラフを用意したい人はぜひ、上のサンプルコードと一緒にトライしてみては如何でしょうか？
※グラフ・チャートを商用利用する場合は有料です。詳細は以下のライセンス情報をご確認ください。
