こんにちは。新卒2年目のy_kwmtです。今回は業務で取り扱っているChart.jsについて少し学習したので、 紹介していきたいと思います。
Chart.jsとは
グラフを簡単に描くことができるJavascriptのライブラリです。 グラフはHTML5のCanvasを使って描画することができます。
描画できるグラフ一覧
折れ線グラフ
棒グラフ
レーダーチャート
円グラフ
散布図
公式サイト
公式ドキュメント
折れ線グラフを描画する
1/27~2/2の大阪の予想最高気温と予想最低気温をグラフにまとめてみました。 以下はソースコードと実際に表示される画面です。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>グラフ</title> </head> <body> <h1>折れ線グラフ</h1> <canvas id="graph"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> <!-- Chart.js読み込み --> <script> var ctx = document.getElementById("graph"); var myLineChart = new Chart(ctx, { type: 'line', // 表示するグラフのタイプ data: { labels: ['1月27日', '1月28日', '1月29日', '1月30日', '1月31日', '2月1日', '2月2日'], // 横軸 datasets: [ { label: '最高気温', // 凡例 data: [11, 17, 14, 12, 9, 10, 11], borderColor: "rgba(255,0,0,1)", // グラフの色 backgroundColor: "rgba(0,0,0,0)" // 塗りつぶしなし }, { label: '最低気温', // 凡例 data: [9, 10, 7, 6, 4, 3, 4], borderColor: "rgba(0,0,255,1)", // グラフの色 backgroundColor: "rgba(0,0,0,0)" // 塗りつぶしなし } ], }, options: { title: { display: true, text: '気温(1月27日~2月2日)' // タイトル }, elements: { line: { tension: 0, // ベジェ曲線を無効にする } }, scales: { // 軸設定 yAxes: [{ // y軸設定 ticks: { suggestedMax: 20, // 最高値 suggestedMin: 0, // 最低値 stepSize: 5, // 間隔 callback: function(value, index, values){ return value + '度' } } }] }, } }); </script> </body> </html>
棒グラフを描画する
架空の店の売り上げをグラフにまとめてみました。 以下はソースコードと実際に表示される画面です。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> </head> <body> <h1>棒グラフ</h1> <canvas id="graph"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> <!-- Chart.js読み込み --> <script> var ctx = document.getElementById("graph"); var myLineChart = new Chart(ctx, { type: 'bar', // 表示するグラフのタイプ data: { labels: ['1月27日', '1月28日', '1月29日', '1月30日', '1月31日', '2月1日', '2月2日'], // 横軸 datasets: [ { label: 'A店 売上高', // 凡例 data: [200, 190, 160, 195, 215, 180, 170], backgroundColor: "rgba(255,255,102,1)" // グラフの塗りつぶし },{ label: 'B店 売上高', // 凡例 data: [160, 150, 130, 170, 155, 140, 170], backgroundColor: "rgba(102,255,204,1)" // グラフの塗りつぶし },{ label: 'C店 売上高', // 凡例 data: [120, 130, 135, 115, 150, 130, 120], backgroundColor: "rgba(102,204,255,1)" // グラフの塗りつぶし } ] }, options: { title: { display: true, text: '支店別 売上高' // タイトル }, scales: { // 軸設定 yAxes: [{ // y軸設定 ticks: { suggestedMax: 240, // 最高値 suggestedMin: 100, // 最低値 stepSize: 30, // 間隔 callback: function(value, index, values){ return value + '万円' } } }] }, } }); </script> </body> </html>
おわりに
今回はChart.jsについて紹介させていただきました。 学習、資料作成の時間をあまりとることができず、今回は折れ線グラフと棒グラフのみの紹介となりました。 次回はグラフの表示非表示の切り替えなどグラフに対する操作をしたいと思っています。