Chart.jsとは？
オープンソースで開発されているJavaScriptライブラリです。
Webページ上で見栄えのいいグラフを簡単に作成可能できること、シンプル＋少し可愛い感じの見た目が特徴です。
特徴としては、以下。
- コーディングが簡単
- 8種類のグラフが使用可能
- HTML5対応
- レスポンシブ対応(ウインドウサイズに合わせて最適化)
- インタラクティブ(マウスオーバーすると値が表示されたり)
- MITライセンス (著作権表示さえすれば無償で使用して可能)
以下の8種類のグラフと、複合グラフが利用可能。
- 折れ線グラフ
- 棒グラフ
- レーダーチャート
- ドーナツグラフ・円グラフ
- Polar Area(円グラフの一種だが各セグメントが同じ角度)
- バブルチャート
- 散布図
- 面グラフ
公式サイトは↓です。
Chart.js以外にも、同種のライブラリにGoogle Chartsなどがあります(Google Chartsも無料で商用利用可能ですが、ライブラリをダウンロードして使用はできません*1)。ただ、グラフの種類はGoogle Chartsの方が豊富です。
Google Chartsについては、別の記事で書きたいと思います。
ちなみに、本記事では最新バージョンの2.9.3を使用します。
－－－
*1 Google Charts FAQ
ライブラリの読込(もしくはダウンロード)
スタンドアロン版を利用する場合
スタンドアロン版は下記のGitHubからダウンロード可能です。
注意点としては、スタンドアロン版の場合は「Moment.js」という別のライブラリが別途必要となりますが、Chart.jp, Chart.min.jsには含まれていません。使用していない場合は別途ダウンロード(ここから)するか、Moment.jsを同梱したバージョンである「Chart.bundle.js」か「Chart.bundle.min.js」を使用して下さい。
補足：minがあるライブラリとないライブラリの差
ファイルを開くと分かりますが、minが付くライブラリは改行・空白・コメントが削除されて軽量化されたものです。機能的にはどちらも変わりません。軽量版のほうが相手方のサーバー負荷も軽くなるかもしれません(大変微々たるものだと思いますが)。
CDNを利用する場合
CDN*2版を利用する場合、CDNJSの以下のページから選択します。
ここでは、Chart.min.jsを使うことにしましょう。
マウスオーバーすると「Copy」ボタンが出現するので、「Copy Script Tag」*3をクリックします。
すると、以下のようなscriptタグがクリップボードにコピーされます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>後は、これをHTMLのHEADかBODYの中に挿入すれば、使用の準備はOK。
－－－
*2 CDN (Content Deliverry Network)は、ライブラリなどを自サーバー以外に配置する仕組み。配置が分散できるため負荷分散が期待できる。ちなみに、GoogleやMSも独自のCDNを提供している。
*3 タグ中に長々とintegrity=”. . .”とありますが、これはSRI (SubResource Integrity)で、CDNから取得したファイルが改ざんされていないかをチェックする仕組みです。どうでもよいという方は「Copy Script Tag without SRI」を選んでもよいでしょう(セキュリティ的におすすめしませんが)。
折れ線グラフ(Line)の書き方
最初から概念を細かく説明するより、まず、実例を見たほうが速いでしょう。
まずBODYの中に以下のcanvasタグを埋め込みます。
canvasタグの場所にグラフが描画されます。。
idで指定した値(myChart)は、別途、指定する際に使用します。
<canvas id="myChart"></canvas>次に、グラフの詳細を指定するスクリプトを記述します。
上記canvasタグの直後などに配置して下さい。
<!-- ライブラリ読込 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
// データを指定
data: {
labels: ['月', '火', '水', '木', '金', '土', '日'],
datasets: [{
label: 'dataset example',
borderColor: 'rgb(75, 192, 192)',
fill: false,
data: [10, 2, 5, 4, 6, 7, 11]
}]
},
// 設定はoptionsに記述
options: {
//タイトル
title: {
display: true,
text: '線グラフの例'
}
}
});
</script>すると、下のようなグラフが描画されます。
つまり、Chart.jsでのグラフ作成には大きく2つの要素が必要です。
- canvasタグ (グラフを描画)
- グラフの内容を指定するscript
解説
getElementByIdの引数にグラフを描画するcanvasタグのidを記述します。
getContext(‘2d’)は2次元画像であることを示します。
var ctx = document.getElementById('myChart').getContext('2d');グラフの内容はChartクラスをインスタンス化する際に指定します。
ここでは、大きくtype, data, optionsの引数を渡しています。
type:
グラフの種類を表します。
typeに指定できる値は以下の通り。
- line (折れ線グラフ)
- bar (棒グラフ)
- radar (レーダーチャート)
- doughnut (ドーナツグラフ)
- pie (円グラフ)
- polarArea (全セグメントの角度が同じ円グラフ)
- bubble (バブルチャート)
- scatter (散布図)
data:
グラフ領域に描画するデータを記述します。JSON形式で記述していますね。
labelは横軸の各名称、borderColorは線の色、fill: falseは線の中を塗りつぶさないという意味(ここをtrueにするか記述を省くと面グラフになる)、dataは各列のデータを表します。
JavaScriptでは[ ]で囲った部分は配列を表します。
options:
設定を表します。
グラフタイトルなど、何も指定する必要がない場合は
options: { }と記します。
titleは文字通りタイトルのことで、display: trueはタイトルを表示させるということ、textはタイトルの文言を表します。
以上のように、canvasタグとJavaScriptでグラフを記述します。
円グラフ(pie)
円グラフの例です。
<canvas id="example-pie">別の書き方をしてみました（少し見づらいですが）。
要するに、ChartクラスをインスタンスできればOKです。
（ライブラリ読込は省略しています）
<script>
new Chart(document.getElementById("example-pie"),
{"type":"pie",
"data":{"labels":["Red","Blue","Yellow", "Grey"],
"datasets":[{"label":"example2",
"data":[60,20,15,5],
"backgroundColor":["rgb(255, 99, 132)",
"rgb(54, 162, 235)",
"rgb(255, 205, 86)",
"rgb(128, 128, 128)"]
}]
}
}
);
</script>表示結果は以下の通り。
グラフの中に各セグメントの値を表示できればもう少し見た目が良い気がしますが、別途コーディングが必要になるため、今回は省きます（マウスオーバーさせれば値を表示可能ですが）。
シンプルかつインタラクティブなグラフを表示できますが、より複雑な表示をしようと思うと、コーディングが必要になります。
基本概念のまとめ
canvasタグ
canvasタグでid属性を定義し、この場所にグラフが描画されます。
Chartクラス
Chartクラスをインスタンス化する際に、グラフの内容を定義します。
Chartインスタンス作成時、以下の変数を指定します。
type: グラフの種類
data: グラフに描画するデータ(系列名,値を含む)
options: 設定値 (中身はなくてもOK)
まとめ
シンプルではありますが、かわいい見た目のグラフが簡単に作成可能です。
グラフのデータを外部ファイル化すればデータの入替が楽にできそうですが、それは別の記事で書こうと思います。
より発展的な内容も、別の記事で書こうと思います。
より詳しく知りたい方は公式ドキュメントが一番詳しいので、英文に抵抗が無い方はどうぞ。
終わり。
※追記(2020/10/5)
Chart.jsで時系列表示のグラフを作成する方法を説明した記事を追加しています。
