【記事テーマ】
・折れ線グラフをJavaScriptで実装したい
・HTML上に簡単にグラフを作成したい
システム開発をしていると、登録したデータや集計したデータをグラフ化したいという要望が出てきます。分析機能だとよくある機能ですね。特にグラフでも折れ線グラフにしたいという要望が多いです。
グラフの描画を自分でイチから作成するというのはさすがに大変です！今回紹介するライブラリ「chart.js」を使えば、あっという間にグラフ描画ができるのでおすすめです！
このライブラリが優れているところは折れ線グラフ以外にも、棒グラフや円グラフなど色々なグラフのタイプを指定する事が可能なことと、それぞれのグラフでも色々なオプションが用意されていて、おしゃれなカスタマイズが可能です！
以下の折れ線グラフは画像ではないです！JavaScriptで生成していて、各ポイントにマウスをあてるとデータが表示されます。
空のhtmlファイル（demo.html等）を作成し、当ページのサンプルソースを貼り付けて、ブラウザで実行すると、すぐに動作確認できます！
CDNを使うとライブラリのダウンロードも不要で以下のコピペだけで実装終了です！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 独自ライブラリ読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<!-- /独自ライブラリ読み込み -->
<title>グラフ</title>
</head>
<body>
<div style="width:500px;" >
<canvas id="chart"></canvas>
</div>
<script>
var ctx = document.getElementById("chart");
var myLineChart = new Chart(ctx, {
// グラフの種類：折れ線グラフを指定
type: 'line',
data: {
// x軸の各メモリ
labels: ['8月9日', '8月10日', '8月11日', '8月12日', '8月13日', '8月14日', '8月15日'],
datasets: [
{
label: '最高気温(度）',
data: [27, 26, 31, 25, 30, 22, 27, 26],
borderColor: "#ec4343",
backgroundColor: "#00000000"
},
{
label: '最低気温(度）',
data: [18, 21, 24, 22, 21, 19, 18, 20],
borderColor: "#2260ea",
backgroundColor: "#00000000"
}
],
},
options: {
title: {
display: true,
text: '札幌の気温（8月9日～8月15日）'
},
scales: {
yAxes: [{
ticks: {
suggestedMax: 40,
suggestedMin: 15,
stepSize: 10, // 縦メモリのステップ数
callback: function(value, index, values){
return value + '度' // 各メモリのステップごとの表記（valueは各ステップの値）
}
}
}]
},
}
});
</script>
</body>
</html>公式サイトはこちらになります。
https://www.chartjs.org/
CDNの方式でも可能なので、以下のコードをかけばOKです。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
jQueryのライブラリも不要ですので、これで終わりです！
あとはサンプルソースのbody部分を貼り付ければ、完成です。
HTMLを作成
<canvas id="chart1"></canvas>グラフを描画したい場所にcanvasタグを置き、id属性をつけましょう。
JavaScriptを作成
var ctx = document.getElementById("chart1");
var myLineChart = new Chart(ctx, {
// グラフの種類：折れ線グラフを指定
type: 'line',
data: {
// x軸の各メモリ
labels: ['8月9日', '8月10日', '8月11日', '8月12日', '8月13日', '8月14日', '8月15日'],
datasets: [
{
label: '最高気温(度）',
data: [27, 26, 31, 25, 30, 22, 27, 26],
borderColor: "#ec4343",
backgroundColor: "#00000000"
},
{
label: '最低気温(度）',
data: [18, 21, 24, 22, 21, 19, 18, 20],
borderColor: "#2260ea",
backgroundColor: "#00000000"
}
],
},
options: {
title: {
display: true,
text: '札幌の気温（8月9日～8月15日）'
},
scales: {
yAxes: [{
ticks: {
suggestedMax: 40,
suggestedMin: 15,
stepSize: 10, // 縦メモリのステップ数
callback: function(value, index, values){
return value + '度' // 各メモリのステップごとの表記（valueは各ステップの値）
}
}
}]
},
}
});canvasタグを取得（document.getElementById(“chart1”);の部分）し、取得した要素とどういう内容のグラフにするかを指定して生成します。（2行目以降のvar myLineChart = new Chart(ctx, {～～の部分）
「new Chart」の2つ目の引数の「どういう内容のグラフにするか」については、以下の3種類を指定する事となります。
◆type
→棒グラフ・折れ線グラフ・円グラフなどのどれにするか。
今回の記事では折れ線グラフがテーマなので、「line」となります。
◆data
→実際のグラフのデータ。複数指定可能です。
dataの中にさらに「labels」「datasets」があり「datasets」は「label」「data」「borderColor」「backgroundColor」があります。
以下の階層構造になります。
data
→labels：x軸のメモリ名
→datasets：グラフのデータ
→label：凡例の名称
→data：実際のy軸のデータ
→borderColor：線の色
→backgroundColor：y軸0から線までの間の色
data１つにつき、折れ線グラフが1つできるイメージとなります。
datasetsについては指定できる項目がたくさんあり、ポイントの塗りつぶし色指定や線の塗りつぶしの色、ホバーしたときのポイントの背景色指定など30項目以上あります。
◆options
→メモリの幅やタイトルを付けるかどうか、どういう形状にするかなどの色々なオプションを指定できます。
上記のソースでは、y軸に対してオプションを設定しており（yAxes）、callbackの指定により、各メモリのステップごとの表記（valueは各ステップの値）を変更しています。それぞれに「度」という文字を追加
せっかくなので色々なパターンをお見せいたします。
CDNを使うとライブラリのダウンロードも不要で以下のコピペだけで実装終了です！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- jQuery・bootstrapライブラリ読み込み -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- /jQuery・bootstrapライブラリ読み込み -->
<!-- 独自ライブラリ読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<!-- /独自ライブラリ読み込み -->
<meta charset="utf-8">
<title>グラフ</title>
</head>
<body>
<div style="width:500px;" >
<canvas id="chart1"></canvas>
</div>
<script>
var ctx = document.getElementById("chart1");
var myLineChart = new Chart(ctx, {
// グラフの種類：折れ線グラフを指定
type: 'line',
data: {
// x軸の各メモリ
labels: ['8月9日', '8月10日', '8月11日', '8月12日', '8月13日', '8月14日', '8月15日'],
datasets: [
{
label: '最高気温(度）',
data: [27, 26, 31, 25, 30, 22, 27, 26],
borderColor: "#ec4343",
backgroundColor: "#00000000",
lineTension:0
},
],
},
});
</script>
</body>
</html>CDNを使うとライブラリのダウンロードも不要で以下のコピペだけで実装終了です！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- jQuery・bootstrapライブラリ読み込み -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- /jQuery・bootstrapライブラリ読み込み -->
<!-- 独自ライブラリ読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<!-- /独自ライブラリ読み込み -->
<meta charset="utf-8">
<title>グラフ</title>
</head>
<body>
<div style="width:500px;" >
<canvas id="chart2"></canvas>
</div>
<script>
var ctx = document.getElementById("chart2");
var myLineChart = new Chart(ctx, {
// グラフの種類：折れ線グラフを指定
type: 'line',
data: {
// x軸の各メモリ
labels: ['8月9日', '8月10日', '8月11日', '8月12日', '8月13日', '8月14日', '8月15日'],
datasets: [
{
label: '最高気温(度）',
data: [27, 26, 31, 25, 30, 22, 27, 26],
borderColor: "#ec4343",
backgroundColor: "#00000000",
steppedLine:true
},
],
},
});
</script>
</body>
</html>CDNを使うとライブラリのダウンロードも不要で以下のコピペだけで実装終了です！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- jQuery・bootstrapライブラリ読み込み -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- /jQuery・bootstrapライブラリ読み込み -->
<!-- 独自ライブラリ読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<!-- /独自ライブラリ読み込み -->
<meta charset="utf-8">
<title>グラフ</title>
</head>
<body>
<div style="width:500px;" >
<canvas id="chart3"></canvas>
</div>
<script>
var ctx = document.getElementById("chart3");
var myLineChart = new Chart(ctx, {
// グラフの種類：折れ線グラフを指定
type: 'line',
data: {
// x軸の各メモリ
labels: ['8月9日', '8月10日', '8月11日', '8月12日', '8月13日', '8月14日', '8月15日'],
datasets: [
{
label: '最高気温(度）',
data: [27, 26, 31, 25, 30, 22, 27, 26],
borderColor: "#ec4343",
backgroundColor: "#00000000",
borderDash: [5, 5],
},
],
},
});
</script>
</body>
</html>少しオプションをいじるだけでオシャレなグラフが簡単にできるので、とても便利です！折れ線グラフ以外にも棒グラフや円グラフ、レーダーチャートなどもあるので、今後紹介していきます。
よかったら、ＳＮＳでシェアして頂けると嬉しいです！
今後の励みにもなりますので、よろしくお願いします！
