Javascriptでグラフを表現する方法【Chart.jsを利用】
画面で折れ線グラフや棒グラフを表現するのは一見難しそうですが、実はChart.jsというライブラリを利用することで簡単に実装できます。
円グラフやレダーチャートといった表現も可能で便利なため、特に作りたいグラフが無い方も、エクセルなどで管理している資料をJavascriptで実装してみてください！
注意：本投稿を作成した時点で最新であったver2.7.1を用いています。
Contents
Chart.jsの仕様
Chart.jsを利用したグラフ描画は、Chartクラスに適切な引数を渡してコンストラクタを呼び出すだけです。
よって、どういった引数を作成して渡してあげないといけないのか？という点がポイントとなります。
Chartクラスのコンストラクタの引数
引数と概要を以下にまとめます。
- type：グラフの種類を指定します。
- line：折れ線グラフ
- bar/horizontalBar：棒グラフ
- radar：レダーチャート
- doughnut/pie：円グラフ
- polarArea：極座標グラフ
- bubble：バブルチャート
- scatter：散布図
- data：グラフ描画に必要な情報を指定します。（グラフ作成のためのデータや、グラフの色など）。ここで指定する属性は、指定したtypeによって異なるため、後述します。
- options：スタイル情報などを指定します。こちらも、typeによって異なります。
実装してみる
今回は、以下のようなフォルダ・ファイルをローカル環境に作成して実施してみます。
|
1 2 |
sample/ └ index.html |
こちらの、index.htmlをテキストエディタなどで編集し、ブラウザで表示して確認してください。
折れ線グラフ(type=line)の実装
まずは折れ線グラフからです。
HTMLタグの定義
bodyタグ内で、グラフを表示したい箇所に以下の実装を行います。
|
1 |
<canvas id="myChart" width="600" height="400"></canvas> |
HTMLの記述はこの1行のみでOKです。 canvasタグのwidth属性には横幅をpx単位で、heightには高さを同じくpx単位で記述します。
Javascript関数の定義
Javascriptの記述を行います。 まずは、ライブラリの読み込み。
|
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> |
次に、実際にグラフにプロットする値を設定したり、グラフのタイプを設定したりする処理を実装します。 以下は、解説のためコメントを記載していますが、うまく動かなければコメント部分を削除して試してみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> new Chart(document.getElementById("myChart"),{ "type":"line" // グラフのタイプとして折れ線グラフを指定 ,"data":{ "labels":["January","February","March","April","May","June","July"] //横軸の値 ,"datasets":[{ "label":"すごい折れ線グラフ" //ラベル（グラフの説明などを記載） ,"data":[65,59,80,81,56,55,40] //縦軸の値 ,"fill":false //折れ線グラフの下の領域を塗りつぶすフラグ（true：塗りつぶす、false：塗りつぶさない） ,"borderColor":"rgb(75, 192, 192)" // グラフ色を指定 ,"lineTension":0.1 //グラフの滑らか具合を指定（値が大きいほど滑らか・丸っこいになる） }]} ,"options":{} }); </script> |
画面確認
実際に記述してみると、こんな感じになります。
プロットする値は変えず、fillをtrue、lineTensionを0.5にすると、こんな感じです。
棒グラフの実装
続いて棒グラフです。 HTMLの記述については相違ないため割愛します。
javascriptの記述は以下の通りです。 今回は例として1つ目は横向きの棒グラフ（typeが"horizontalBar"）を表示しています。 typeを"bar"にすれば、縦向きの棒グラフを作成可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<script> new Chart(document.getElementById("chartjs-2"),{ "type":"horizontalBar" // グラフのタイプとして棒グラフを指定 ,"data":{ "labels":["January","February","March","April","May","June","July"] // 横軸の値 ,"datasets":[{"label":"すごい棒グラフ" // ラベル（グラフの説明などを記載） ,"data":[65,59,80,81,56,55,40] // 縦軸の値 ,"fill":false // ,"backgroundColor":[ // 棒グラフの中の塗りつぶしい色を指定 "rgba(255, 99, 132, 0.2)" ,"rgba(255, 159, 64, 0.2)" ,"rgba(255, 205, 86, 0.2)" ,"rgba(75, 192, 192, 0.2)" ,"rgba(54, 162, 235, 0.2)" ,"rgba(153, 102, 255, 0.2)" ,"rgba(201, 203, 207, 0.2)" ] ,"borderColor":[ // 棒グラフを縁取る色を指定 "rgb(255, 99, 132)" ,"rgb(255, 159, 64)","rgb(255, 205, 86)" ,"rgb(75, 192, 192)" ,"rgb(54, 162, 235)" ,"rgb(153, 102, 255)" ,"rgb(201, 203, 207)" ] ,"borderWidth":1 // 棒グラフを縁取る線の太さを指定 }] } ,"options":{ "scales":{" xAxes":[{ "ticks":{"beginAtZero":true} // }] } } }); </script> |
実際にグラフを表示するとこんな感じです。
円グラフの実装
円グラフも棒グラフと同様に、Chartクラスを生成する処理を紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> new Chart(document.getElementById("chartjs-4"),{ "type":"doughnut" // グラフの種類として円グラフを指定 ,"data":{ "labels":["Red","Blue","Yellow"] // それぞれの領域のラベル ,"datasets":[{ "label":"すごい円グラフ" // グラフの内容を示すラベル ,"data":[300,50,100] // それぞれの領域の値を指定。この比によって円グラフが生成される ,"backgroundColor":["rgb(255, 99, 132)","rgb(54, 162, 235)","rgb(255, 205, 86)"] // それぞれの領域の色 }] } }); </script> |
実際に表示してみるとこんな感じ。
レダーチャートの実装
レダーチャートはこんな感じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<script> new Chart(document.getElementById("chartjs-3"),{ "type":"radar" ,"data":{ "labels":["Eating","Drinking","Sleeping","Designing","Coding","Cycling","Running"] ,"datasets":[{ // 配列で２つ渡すことで、２つのチャートを重ねて表現可能 "label":"すごく赤いチャート" // チャート名を表すラベル ,"data":[65,59,90,81,56,55,40] // チャートをプロットするための値 ,"fill":true ,"backgroundColor":"rgba(255, 99, 132, 0.2)" // チャートの背景色 ,"borderColor":"rgb(255, 99, 132)" // チャートの線の色 ,"pointBackgroundColor":"rgb(255, 99, 132)" // チャートの点の色 ,"pointBorderColor":"#fff" // チャートの点の枠線の色 ,"pointHoverBackgroundColor":"#fff" // チャート全体の背景色 ,"pointHoverBorderColor":"rgb(255, 99, 132)" // チャートの点をマウスオーバーした時の色 } ,{ "label":"すごく青いチャート" // チャート名を表すラベル ,"data":[28,48,40,19,96,27,100] // チャートをプロットするための値 ,"fill":true ,"backgroundColor":"rgba(54, 162, 235, 0.2)" // チャートの背景色 ,"borderColor":"rgb(54, 162, 235)" // チャートの線の色 ,"pointBackgroundColor":"rgb(54, 162, 235)" // チャートの点の色 ,"pointBorderColor":"#fff" // チャートの点の枠線の色 ,"pointHoverBackgroundColor":"#fff" // チャート全体の背景色 ,"pointHoverBorderColor":"rgb(54, 162, 235)" // チャートの点をマウスオーバーした時の色 }] } ,"options":{"elements":{"line":{"tension":0,"borderWidth":3}}} }); </script> |
グラフはこんな感じになります。
