JavaScriptで棒グラフを表示するプログラムを解説～bar chart～【Chart.js】
JavaScriptでグラフを表示するライブラリのChart.jsの紹介です。今回は、棒グラフ(bar chart)を表示するサンプルコードを解説します。
JavaScriptのChart.jsでプログラミングするにあたって「Chart.jsでグラフを描画してみた」を参考にしました。
JavaScriptでグラフ表示するライブラリChart.js～棒グラフ(bar chart)～のサンプルコード
JavaScriptのChart.jsは、HTML5のcanvasタグへグラフを描画します。ここでは棒グラフ(bar chart)を描画するサンプルコードを紹介します。
<html>
<head>
<meta charset="utf-8">
<title>Chart Sample</title>
</head>
<body>
<h1>Chartサンプル</h1>
<div style="width: 600px;">
<canvas id="chart" width="600" height="300"></canvas>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></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>
<script>
var ctx = $('#chart');
var mychart = new Chart(ctx, {
type: 'bar',
data: {
labels: [
'ラベル１',
'ラベル２',
'ラベル３',
'ラベル４',
'ラベル５'
],
datasets: [{
label: 'データA',
data: [
10,40,20,10,20
],
backgroundColor: 'rgba(176, 110, 30, 1)',
},{
label: 'データB',
data: [
30,10,50,5,5
],
backgroundColor: 'rgba( 31, 167, 165, 1)',
},{
label: 'データC',
data: [
40,5,10,15,30
],
backgroundColor: 'rgba(241, 107, 141, 1)'
}]
},
options: {
title: {
display: true,
text: 'サンプルグラフ'
},
scales: {
yAxes: [{
ticks: {
suggestedMax: 100,
suggestedMin: 0,
stepSize: 10,
callback: function (value, index, values) {
return value + '単位';
}
},
}]
}
}
});
</script>
</body>
</html>JavaScriptでグラフ表示するライブラリChart.js～棒グラフ(bar chart)～のサンプルコードを解説
JavaScriptのChart.jsで棒グラフ(bar chart)を描画するサンプルコードの解説をします。
HTML部分
まずHTML部分を解説します。っといってもcanvasタグを用意するだけですが(汗)
canvasタグを設置
Chart.jsでグラフを描画するためにcanvasタグを設置します。
→idの"chart"は任意の名前でOKです。後述するJavaScriptにてID名でElementを指定する際に利用します。
<canvas id="chart" width="600" height="300"></canvas>Jqueryを読み込む
JQueryをCDN(Content Delivery Network)で読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>Content Delivery Networkの略です。
簡単に言うと、リソース(CSSやJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。
※リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。
Chart.jsを読み込む
グラフ描画するためのライブラリのChart.jsをCDNで読み込みます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>JavaScript部分
次にJavaScript部分の解説をします。
グラフ描画のElementを取得
canvasタグへグラフを描画するElementのIDを指定して取得します。
var ctx = $('#chart');グラフ設定
グラフを描画するための設定やデータをセットします。
var mychart = new Chart(ctx, {
type: 'bar',
data: {
labels: [
'ラベル１',
'ラベル２',
'ラベル３',
'ラベル４',
'ラベル５'
],
datasets: [{
label: 'データA',
data: [
10,40,20,10,20
],
backgroundColor: 'rgba(176, 110, 30, 1)',
},{
label: 'データB',
data: [
30,10,50,5,5
],
backgroundColor: 'rgba( 31, 167, 165, 1)',
},{
label: 'データC',
data: [
40,5,10,15,30
],
backgroundColor: 'rgba(241, 107, 141, 1)'
}]
},
options: {
title: {
display: true,
text: 'サンプルグラフ'
},
scales: {
yAxes: [{
ticks: {
suggestedMax: 100,
suggestedMin: 0,
stepSize: 10,
callback: function (value, index, values) {
return value + '単位';
}
},
}]
}
}
});- type：描画するグラフの種類(pie:円グラフ、line:折れ線グラフ、bar:棒グラフ、など)
- data：グラフのラベルやデータ
- labels：データの凡例
- datasets：データセット
- label：データのラベルテキスト
- data：データの値
- backgroundColor：グラフの色
- options：オプション設定
- title：グラフのタイトル
- display：trueで表示
- text：タイトルのテキスト
- scales：グラフ軸の設定
- yAxes：Y軸の設定
- ticks：目盛り線
- suggestedMin：軸の最小値
- suggestedMax：軸の最大値
- stepSize：軸の刻み幅
- ticks：目盛り線
- yAxes：Y軸の設定
- title：グラフのタイトル
詳しくは「棒グラフ · Chart.js 日本語ドキュメント」を参照してください。
おわり
今回はJavaScriptで棒グラフ(bar chart)をChart.jsで描画するサンプルコードを紹介しました。
JavaScriptのChart.jsでは、グラフの設定やデータをオブジェクトで定義するだけで簡単にグラフが描画できます。色んなライブラリに共通してですが、細かな調整やカスタマイズしようとすると難しい点はありますが(汗)
1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト