JavaScriptで円グラフを表示するプログラムを解説～pie chart～【Chart.js】
JavaScriptでグラフを表示するライブラリのChart.jsで、円グラフ(pie chart)を表示するサンプルコードを解説します。
JavaScriptのChart.jsでプログラミングするにあたって「Chart.jsでグラフを描画してみた」を参考にしました。
JavaScriptでグラフ表示するライブラリChart.js～円グラフ(pie chart)～のサンプルコード
JavaScriptのChart.jsは、HTML5のcanvasタグへグラフを描画します。ここでは円グラフ(pie chart)を描画するサンプルコードを紹介します。
<html>
<head>
<meta charset="utf-8">
<title>Chart Sample</title>
</head>
<body>
<h1>Chartサンプル</h1>
<div style="width: 300px;">
<canvas id="chart" width="150" height="150"></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: 'pie',
data: {
labels: [
'ラベル１',
'ラベル２',
'ラベル３',
'ラベル４',
'ラベル５'
],
datasets: [{
label: 'サンプルグラフ',
data: [
10,
40,
20,
10,
20
],
backgroundColor: [
'rgba(241, 107, 141, 1)',
'rgba( 31, 167, 165, 1)',
'rgba(249, 199, 83, 1)',
'rgba(176, 110, 30, 1)',
'rgba(124, 91, 164, 1)'
]
}]
},
options: {
legend: {
position: 'bottom',
},
scales: {
yAxes: [{
ticks: {
display: false,
beginAtZero: true,
},
gridLines: {
display: false
}
}]
}
}
});
</script>
</body>
</html>JavaScriptでグラフ表示するライブラリChart.js～円グラフ(pie chart)～のサンプルコードを解説
JavaScriptのChart.jsで円グラフ(pie chart)を描画するサンプルコードの解説をします。
HTML部分
まずHTML部分を解説します。っといってもcanvasタグを用意するだけですが(汗)
canvasタグを設置
Chart.jsでグラフを描画するためにcanvasタグを設置します。
→idの"chart"は任意の名前でOKです。後述するJavaScriptにてID名でElementを指定する際に利用します。
<canvas id="chart" width="150" height="150"></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: 'pie',
data: {
labels: [
'ラベル１',
'ラベル２',
'ラベル３',
'ラベル４',
'ラベル５'
],
datasets: [{
label: 'サンプルグラフ',
data: [
10,
40,
20,
10,
20
],
backgroundColor: [
'rgba(241, 107, 141, 1)',
'rgba( 31, 167, 165, 1)',
'rgba(249, 199, 83, 1)',
'rgba(176, 110, 30, 1)',
'rgba(124, 91, 164, 1)'
]
}]
},
options: {
legend: {
position: 'bottom',
},
scales: {
yAxes: [{
ticks: {
display: false,
beginAtZero: true,
},
gridLines: {
display: false
}
}]
}
}
});- type：描画するグラフの種類(pie:円グラフ、line:折れ線グラフ、bar:棒グラフ、など)
- data：グラフのラベルやデータ
- labels：ラベル
- datasets：データセット
- data：データの値
- backgroundColor：円グラフの色
- options：オプション設定
- legend
- scales
- yAxes
- ticks
- gridLines
- yAxes
詳しくは「ドーナツと円グラフ · Chart.js 日本語ドキュメント」を参照してください。
おわり
今回はJavaScriptで円グラフ(pie chart)をChart.jsで描画するサンプルコードを紹介しました。
JavaScriptのChart.jsでは、グラフの設定やデータをオブジェクトで定義するだけで簡単に円グラフが描画できます。色んなライブラリに共通してですが、細かな調整やカスタマイズしようとすると難しい点はありますが(汗)
1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト