JavaScriptライブラリのChart.jsでは8種類のチャート/グラフを作成することができます。
それぞれのチャート/グラフについて、簡単なサンプルコードがまとまっていると使いやすいと思ったのでまとめました。
チャート/グラフを作成できるJavaScritpライブラリで、どれを使おうか選定している人にも参考になればと思います。
https://www.marorika.com/entry/chart-js-library/
目次
Chart.jsで利用できる8種類のチャート/グラフ
Chart.jsでは8種類のチャート/グラフを作成することができます。
8種類のチャート/グラフ
- 線グラフ
- 棒グラフ
- レーダーチャート
- ドーナツチャート
- 円グラフ
- 鶏頭図（けいとうず）
- 散布図
- バブルチャート
それぞれ実際のグラフと、グラフを作成したJavaScriptのコードを掲載していきます。
なおもちろん、掲載したサンプルコードは必要に応じてコピペして利用いただいてかまいません。
[marocard url=”https://www.marorika.com/entry/setting-chart-js/”]
線グラフ
File: chart-js-line.html
------------------------
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myLine" style="width: 100%; height: 300px;"></canvas>
<script>
var ctx = document.getElementById("myLine");
var myLine = new Chart(ctx, {
type: 'line', // チャートのタイプ
data: { // チャートの内容
labels: ["one", "two", "three", "four", "five", "six"],
datasets: [{
label: 'red',
lineTension: 0, // ベジェ曲線を無効化
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'RGBA(182,39,93, 0.4)',
borderColor: 'RGBA(182,39,93, 1)',
borderWidth: 1
}, {
label: 'green',
data: [10, 14, 6, 8, 1, 4],
backgroundColor: 'RGBA(77,169,155, 0.4)',
borderColor: 'RGBA(77,169,155, 1)',
borderWidth: 1
}]
},
options: { // チャートのその他オプション
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
棒グラフ
File: chart-js-bar.html
-----------------------
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myBar" style="width: 100%; height: 300px;"></canvas>
<script>
var myBarElement = document.getElementById("myBar");
var myBar = new Chart(myBarElement, {
type: 'bar', // チャートのタイプ
data: { // チャートの内容
labels: ["one", "two", "three", "four", "five", "six"],
datasets: [{
label: 'red',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'RGBA(182,39,93, 0.4)',
borderColor: 'RGBA(182,39,93, 1)',
borderWidth: 1
}, {
label: 'green',
data: [10, 14, 6, 8, 1, 4],
backgroundColor: 'RGBA(77,169,155, 0.4)',
borderColor: 'RGBA(77,169,155, 1)',
borderWidth: 1
}]
},
options: { // チャートのその他オプション
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
レーダーチャート
File: chart-js-radar.html
-------------------------
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myRadar" style="width: 100%; height: 300px;"></canvas>
<script>
var myRadarElement = document.getElementById("myRadar");
var myRadar = new Chart(myRadarElement, {
type: 'radar', // チャートのタイプ
data: { // チャートの内容
labels: ["one", "two", "three", "four", "five", "six"],
datasets: [{
label: 'red',
lineTension: 0, // ベジェ曲線を無効化
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'RGBA(182,39,93, 0.4)',
borderColor: 'RGBA(182,39,93, 1)',
borderWidth: 1,
pointBackgroundColor: 'RGBA(46,106,177,1)'
}, {
label: 'green',
data: [10, 14, 6, 8, 1, 4],
backgroundColor: 'RGBA(77,169,155, 0.4)',
borderColor: 'RGBA(77,169,155, 1)',
borderWidth: 1,
pointBackgroundColor: 'RGBA(46,106,177,1)'
}]
},
options: { // チャートのその他オプション
// 設定なし
}
});
</script>
ドーナツチャート
File: chart-js-doughnut.html
----------------------------
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myDoughnut" style="width: 100%; height: 300px;"></canvas>
<script>
var myDoughnutElement = document.getElementById("myDoughnut");
var myDoughnut = new Chart(myDoughnutElement, {
type: 'doughnut', // チャートのタイプ
data: { // チャートの内容
labels: ["one", "two", "three"],
datasets: [{
label: 'doughnut',
lineTension: 0, // ベジェ曲線を無効化
data: [14, 10, 6],
backgroundColor: ['RGBA(182,39,93, 1)', 'RGBA(77,169,155, 1)', 'RGBA(46,106,177,1)'],
borderWidth: 5
}]
},
options: { // チャートのその他オプション
// 設定なし
}
});
</script>
円グラフ
File: chart-js-pie.html
-----------------------
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myPie" style="width: 100%; height: 300px;"></canvas>
<script>
var myPieElement = document.getElementById("myPie");
var myPie = new Chart(myPieElement, {
type: 'pie', // チャートのタイプ
data: { // チャートの内容
labels: ["one", "two", "three"],
datasets: [{
label: 'pie',
lineTension: 0, // ベジェ曲線を無効化
data: [14, 10, 6],
backgroundColor: ['RGBA(182,39,93, 1)', 'RGBA(77,169,155, 1)', 'RGBA(46,106,177,1)'],
borderWidth: 5
}]
},
options: { // チャートのその他オプション
// 設定なし
}
});
</script>
鶏頭図（けいとうず）
File: chart-js-polar-area.html
------------------------------
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myPolarArea" style="width: 100%; height: 300px;"></canvas>
<script>
var myPolarAreaElement = document.getElementById("myPolarArea");
var myPolarArea = new Chart(myPolarAreaElement, {
type: 'polarArea', // チャートのタイプ
data: { // チャートの内容
labels: ["one", "two", "three"],
datasets: [{
label: 'polarArea',
lineTension: 0, // ベジェ曲線を無効化
data: [14, 4, 9],
backgroundColor: ['RGBA(182,39,93, 1)', 'RGBA(77,169,155, 1)', 'RGBA(46,106,177,1)'],
borderWidth: 5
}]
},
options: { // チャートのその他オプション
// 設定なし
}
});
</script>
散布図
File: chart-js-scatter.html
---------------------------
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myScatter" style="width: 100%; height: 300px;"></canvas>
<script>
var myScatterElement = document.getElementById("myScatter");
var myScatter = new Chart(myScatterElement, {
type: 'scatter', // チャートのタイプ
data: { // チャートの内容
datasets: [{
label: 'red',
data: [{x:4, y:5}, {x:5, y:9}],
backgroundColor: 'RGBA(182,39,93, 0.4)',
borderColor: 'RGBA(182,39,93, 1)',
borderWidth: 1
}, {
label: 'green',
data: [{x:8, y:4}, {x:2, y:4}],
backgroundColor: 'RGBA(77,169,155, 0.4)',
borderColor: 'RGBA(77,169,155, 1)',
borderWidth: 1
}]
},
options: { // チャートのその他オプション
scales: {
xAxes: [{
ticks: {
max: 10,
min: 0
}
}],
yAxes: [{
ticks: {
max: 10,
min: 0
}
}]
}
}
});
</script>
バブルチャート
File: chart-js-bubble.html
--------------------------
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myBubble" style="width: 100%; height: 300px;"></canvas>
<script>
var myBubbleElement = document.getElementById("myBubble");
var myBubble = new Chart(myBubbleElement, {
type: 'bubble', // チャートのタイプ
data: { // チャートの内容
datasets: [{
label: 'red',
data: [{x:4, y:5}, {x:5, y:9, r:10}],
backgroundColor: 'RGBA(182,39,93, 0.4)',
borderColor: 'RGBA(182,39,93, 1)',
borderWidth: 1
}, {
label: 'green',
data: [{x:8, y:4}, {x:2, y:4, r:20}],
backgroundColor: 'RGBA(77,169,155, 0.4)',
borderColor: 'RGBA(77,169,155, 1)',
borderWidth: 1
}]
},
options: { // チャートのその他オプション
scales: {
xAxes: [{
ticks: {
max: 10,
min: 0
}
}],
yAxes: [{
ticks: {
max: 10,
min: 0
}
}]
}
}
});
</script>
おわりに
Chart.jsで使える8種類のチャート/グラフについて、サンプルを紹介しました。
今回紹介したものはシンプルで簡単なものですが、
十分利用しやすいと思います。
チャートやグラフを作成する際は是非ご利用ください。