記事の詳細
コピペでOK!「Chart.js」を活用してWebページに棒グラフや折れ線グラフを表示する方法
Webページで折れ線グラフや棒グラフを表現する方法を調べてみたら「Chart.js」を使った非常に簡単な実装方法があったのでご紹介します。
今回のブログの見出しはコチラです!
グラフを作成する際の準備
「Chart.js」を活用する際にはライブラリを読み込む必要があります。
今回はCDN経由でライブラリを読み込んで使ってみます。
実際の実装イメージとしてはこんな感じになります。
1 2 3 4 5 6 7 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> <canvas id="line-chart" width="400" height="400"></canvas> <script> <!-- // 処理 //--> </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 |
<canvas id="bar-chart" width="400" height="400"></canvas> <script> <!-- var context = document.getElementById('bar-chart').getContext('2d'); var bar_chart = new Chart(context, { type:'bar', // グラフのタイプを指定 data:{ labels:['1月','2月','3月','4月'], // グラフ下部のラベル datasets:[ {label:'棒グラフのデータ', // データのラベル data:[10,20,30,40], // グラフ化するデータの数値 borderColor:'rgb(255, 99, 132)', // 棒を囲う線の色 backgroundColor:'rgba(255, 99, 132, 0.2)'} // 棒の中の色 ] }, options:{ scales:{ yAxes:[{ ticks:{ min:0, // グラフの最小値 max: 50 // グラフの最大値 } }] } } }); //--> </script> |
実際のグラフは下記のようになります。
グラフのスタイルを調整したい場合は、datasets内の項目の数値を変更することで調整ができます。
折れ線グラフの作成方法
折れ線グラフを表現する際は下記のようなプログラムになります。
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 |
<canvas id="line-chart" width="400" height="400"></canvas> <script> <!-- var context = document.getElementById('line-chart').getContext('2d'); var line_chart = new Chart(context, { type:'line', // グラフのタイプを指定 data:{ labels:['1月','2月','3月','4月'], // グラフ下部のラベル datasets:[ {label:'線グラフのデータ', // データのラベル data:[5,40,20,30], // グラフ化するデータの数値 fill:false, // グラフの下部を塗りつぶさない borderColor:'rgb(54, 162, 235)'} // 線の色 ] }, options:{ scales:{ yAxes:[{ ticks:{ min:0, // グラフの最小値 max: 50 // グラフの最大値 } }] }, elements:{ line:{ tension: 0 // 線グラフのベジェ曲線を無効にする } } } }); //--> </script> |
実際のグラフは下記のようになります。
棒グラフと同じように、グラフのスタイルを調整したい場合はdatasets内の項目の数値を変更することで調整ができます。
棒グラフと折れ線グラフを合わせたグラフの作成方法
棒グラフと折れ線グラフを合わせたグラフを表示する際には、棒グラフのデータに折れ線グラフのデータを追加して表示します。
具体的には、下記のようなプログラムになります。
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 38 39 40 41 42 |
<canvas id="mix-chart" width="400" height="400"></canvas> <script> <!-- var context = document.getElementById('mix-chart').getContext('2d'); var mix_chart = new Chart(context, { type:'bar', // グラフのタイプを指定 data:{ labels:['1月','2月','3月','4月'], datasets:[ {label:'棒グラフ1のデータ', data:[10,20,30,40], borderColor:'rgb(255, 99, 132)', backgroundColor:'rgba(255, 99, 132, 0.2)'}, {label:'棒グラフ2のデータ', data:[20,30,10,5], borderColor:'rgb(101, 255, 99)', backgroundColor:'rgba(101, 255, 99, 0.2)'}, {label:'線グラフのデータ', data:[5,40,20,30], type:'line', // グラフのタイプを指定 fill:false, borderColor:'rgb(54, 162, 235)'} ] }, options:{ scales:{ yAxes:[{ ticks:{ min:0, // グラフの最小値 max: 50 // グラフの最大値 } }] }, elements:{ line:{ tension: 0 // 線グラフのベジェ曲線を無効にする } } } }); //--> </script> |
実際のグラフは下記のようになります。
最初に紹介した棒グラフや折れ線グラフのプログラムとの違いは下記二点になります。
①datasetsの項目にグラフごとのデータを指定する
②グラフのタイプと異なるタイプのグラフを入力する場合は別途指定する
最初に指定したグラフのタイプが棒グラフ(‘bar’)の場合は、datasetsで指定したデータも全て棒グラフとして表示されます。
ですが、個別に別のタイプを指定する事で、違う種類のグラフを混ぜる事ができます。
このように、「Chart.js」を使うことで簡単にグラフの表現ができてしまいます。
今回使用した「Chart.js」はサンプルコードも多いので、カスタマイズする際には他のサイトも参考にしてみてください!
カスタマイズの基本的なことに関しては、下記サイト様で詳しく紹介されていますので、参考にして下さい。
Chart.js · Chart.js 日本語ドキュメント
ではまた!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。