【以下を解決します】
・WEBシステムに棒グラフを手軽に実装したい
・サイトに棒グラフを入れたい
・重ねられる棒グラフを実装したい
システム開発をしていると、集計データを棒グラフにしたいという要望が出てきたりします。そんなときchart.jsというライブラリを使えば、簡単にグラフを実装することができます！JavaScriptのみで実装可能で、jQueryも不要です。
また、凡例表示や色、幅、軸などのカスタマイズもいろいろ行うことが可能なので、使い勝手がいいです！
空の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").getContext('2d');
var myChart = new Chart(ctx, {
type: "bar", // ★必須 グラフの種類
data: {
labels: ["1年", "2年", "3年", "4年", "5年"], // Ｘ軸のラベル
datasets: [
{
label: "系列Ａ", // 系列名
data: [10, 22, 10, 9, 12] , // ★必須 系列Ａのデータ
backgroundColor: "blue",
},
]
},
options: { // オプション
responsive: true, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定
scales: { // 軸設定
xAxes: [{ // Ｘ軸設定
}],
yAxes: [{
display: true, // 表示の有無
ticks: { // 目盛り
min: 0, // 最小値
max: 30, // 最大値
},
}],
},
}
});
</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>あとはサンプルソースのbody部分を貼り付けたら、完了となります。とても簡単ですね！
HTMLを作成
グラフを描画したい箇所にcanvasタグを配置し、なにかid属性をつけましょう。
<canvas id="chart"></canvas>JavaScriptを作成
<script>
var ctx = document.getElementById("chart").getContext('2d');
var myChart = new Chart(ctx, {
type: "bar", // ★必須 グラフの種類
data: {
labels: ["1年", "2年", "3年", "4年", "5年"], // Ｘ軸のラベル
datasets: [
{
label: "系列Ａ", // 系列名
data: [10, 22, 10, 9, 12] , // ★必須 系列Ａのデータ
backgroundColor: "blue",
},
]
},
options: { // オプション
responsive: true, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定
scales: { // 軸設定
xAxes: [{ // Ｘ軸設定
}],
yAxes: [{
display: true, // 表示の有無
ticks: { // 目盛り
min: 0, // 最小値
max: 30, // 最大値
},
}],
},
}
});
</script>canvasタグを取得（document.getElementById(“chart”);の部分）し、取得した要素とどういう内容のグラフにするかを指定して生成します。（2行目以降のvar myLineChart = new Chart(ctx, {～～の部分）
「new Chart」の2つ目の引数の「どういう内容のグラフにするか」については、以下の3種類を指定する事となります。
◆type →グラフの種類。今回は棒グラフなので、「bar」と指定します。
◆data→グラフの値。
◆option→色々なカスタマイズ設定。x軸やy軸の幅の設定や下限、上限の設定などなど。
棒グラフは重ねることもできたり、水平方向のグラフにすることも可能ですので、そのサンプルを以下でご紹介します。
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="chart2"></canvas>
</div>
<script>
var ctx = document.getElementById("chart2").getContext('2d');
var myChart = new Chart(ctx, {
type: "bar", // ★必須 グラフの種類
data: {
labels: ["1年", "2年", "3年", "4年", "5年"], // Ｘ軸のラベル
datasets: [
{
label: "系列Ａ", // 系列名
data: [10, 22, 10, 9, 12] , // ★必須 系列Ａのデータ
},
{
label: "系列Ｂ",
data: [ 5, 2, 5, 5,8],
backgroundColor: "blue"
}
]
},
options: { // オプション
responsive: true, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定
scales: { // 軸設定
xAxes: [{ // Ｘ軸設定
stacked: true // 積み上げの指定
}],
yAxes: [{
stacked: true, // 積み上げの指定
display: true, // 表示の有無
ticks: { // 目盛り
min: 0, // 最小値
max: 30, // 最大値
},
}],
},
}
});
</script>
</body>
</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="chart3"></canvas>
</div>
<script>
var ctx = document.getElementById("chart3").getContext('2d');
var myChart = new Chart(ctx, {
type: "horizontalBar", // ★必須 グラフの種類
data: {
labels: ["1年", "2年", "3年", "4年", "5年"], // Ｘ軸のラベル
datasets: [
{
label: "系列Ａ", // 系列名
data: [10, 22, 10, 9, 12] , // ★必須 系列Ａのデータ
backgroundColor: "blue",
},
]
},
options: { // オプション
responsive: true, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定
scales: { // 軸設定
xAxes: [{ // Ｘ軸設定
stacked: true // 積み上げの指定
}],
yAxes: [{
stacked: true, // 積み上げの指定
display: true, // 表示の有無
ticks: { // 目盛り
min: 0, // 最小値
max: 30, // 最大値
},
}],
},
}
});
</script>
</body>
</html>
よかったら、ＳＮＳでシェアして頂けると嬉しいです！
今後の励みにもなりますので、よろしくお願いします！
