複雑な定量のデータは、チャートやグラフを使えば視覚的に分かりやすく直観的に理解できますよね。
そんな時に便利なのは、JavaScriptのライブラリ「Chart.js」です。
かなりメジャーなライブラリなので、既にご存知の方が多いとは思いますが、そんな「Chart.js」を使って、いろんなグラフ・チャートを作ってみます。
是非、参考にしてみてください。
Chart.js
「Chart.js」は、JavaScriptでグラフ・チャートを描画するライブラリです。
JavaScriptでグラフの設定を行い、図形を描く際に使用されるHTML5の Canvas タグに、JavaScriptを使ってブラウザ上にグラフ・チャートを描画します。
Chart.jsで描画されたグラフ・チャートは、インタラクションな操作も可能で、見栄えのいい表を作成するのにピッタリなライブラリです。
外部リンク Chart.js 公式サイト
また、MITライセンスなので、商用・私用を問わず無償で利用可能なのも嬉しいところです。
この記事では、そんな「Chart.js」についてサンプルも交え解説していきます。
Chart.jsでグラフ・チャートサンプル6種
早速、Chart.jsを使ったサンプルです。ここでは以下6種類のグラフ・チャートを作ってみました。
- 線グラフ … 時系列で変化を捉えるときに使用するグラフ
- 棒グラフ … 縦軸にデータ量をとり、棒の高さでデータの大小を表したグラフ
- 水平（横）の棒グラフ … 棒グラフを横にしたグラフ。走行距離や作業の進捗など、進展をイメージさせる項目で用いられる場合が多い。（らしい）
- バブルチャート … データの影響度合が強いか・弱いかを円の大小も用いて視覚的に把握することができるチャート
- パイチャート … 複数の部分に分かれた円形のチャート
- レーダーチャート … 複数の項目がある変量を正多角形上に表現したチャート
これらのグラフ・チャートはアコーディオンUIをクリックすると見れるので、見たいものをクリックしてみてください。
この他にも散布図や、真ん中がポッカリ空いているドーナツチャート、棒グラフと線グラフの掛け合わせのグラフなど、Excelで選べるグラフはほとんどと言っていいほどできてしまうのが「Chart.js」です。
しかし「Chart.js」は、本当にすごいライブラリですね。
実装の手順と方法
Chart.jsのインストールは、npmやダウンロード、CDNなどで使用可能です。以下はCDNでの利用方法で、以下のコードをHTMLの <head>〜</head> の中に記述しましょう。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>npmでのインストール方法は こちら を参考にしてみてください。
設置したい場所へ canvas タグをHTMLに記述します。
<canvas id="myChart" width="400" height="400"></canvas>最後に、JavaScriptのコードをページに記述します。これは、Chart.jsの機能や各値を指定するオプションです。
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["赤", "青", "黄色", "緑", "紫", "橙"],
datasets: [{
label: '得票数',
data: [12, 19, 3, 17, 9, 4],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 2,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});グラフの色や、背景色、レスポンシブ、目盛線等々、いろんなカスタマイズができます。
Chart.js の使用方法
Chart.jsは、いろんなカスタマイズが可能で、自分好みのUIを簡単に作ることができます。また、「棒グラフ＆折れ線グラフ」のように、複数のグラフを一つのブロックに表示させることもできます。
これらの方法については、Chart.js 日本語ドキュメント さんが詳しく解説してくれています。
とにかくオプションが豊富なので、参考にしてみてください。
外部リンク Chart.js 日本語ドキュメント「使用方法」
他のチャートライブラリとの比較も載っていたりします。
さいごに
いかがでしたでしょうか？今回は「Chart.js」のご紹介でした。
「Chart.js」は、HTMLで静的に使うより、データベースの値からグラフ・チャートに描画することが多いと思いますが、是非参考にして使ってみてください。
