Chart.jsを使って棒グラフを表示するためのスクリプトサンプルです。
コピペして流用しやすいよう、データなど書き換えが必要な部分はスクリプトの最初のほうに変数としてまとめて書いています。
ここで掲載しているサンプルはChart.jsの v3.7.0 向けです。
v2.x.x系のようにメジャーバージョンが異なる場合、v.3系でもマイナーバージョンが異なる場合は正しく表示できないものもありますので注意。
目次
普通の棒グラフ
基本的な棒グラフ。
typeにbarを指定すると棒グラフを描画できます。
基本的な設定項目は線グラフと同じですが、backgroundColorも設定するようにしましょう。
スクロールできます
| 項目 | 概要 |
|---|---|
| label | 系列の名前を指定する。 |
| data | グラフにするデータを「, （カンマ）」区切りで指定する。 |
| borderColor | 線の色を指定する。 |
| backgroundColor | 棒グラフ内の塗りつぶしの色を指定する。 |
グラフのスクリプトを表示
<canvas id="myChart1" style="padding: 10px;"></canvas>
<script>
// 横軸のラベル
var xlabels = ["A", "B", "C", "D", "E", "F", "G"];
// １つ目の系列の情報を設定
var series01name = "データ１"; // 系列１の名前
var series01data = [ 10, 40, 10, 40, 10, 40, 10]; // 系列１データ
var series01bgcolor = "rgba(255, 99, 132, 0.2)"; // 系列１の塗りつぶし色
var series01linecolor = "rgba(255, 99, 132, 1.0)"; // 系列１の線の色
// ２つ目の系列の情報を設定
var series02name = "データ２";
var series02data = [ 35, 15, 35, 15, 35, 15, 35];
var series02bgcolor = "rgba(255, 200, 132, 0.2)";
var series02linecolor = "rgba(255, 200, 132, 1.0)";
// ３つ以上系列を描画する場合は上のセットを追加する
// グラフ縦軸の最大／最小／目盛りの間隔を設定
var ymax = 50; // グラフ縦軸の最大
var ymin = 0; // グラフ縦軸の最小
var ystep = 10; // グラフ縦軸の目盛り線を引く間隔
var ctx = document.getElementById("myChart1").getContext("2d");
var myChart1 = new Chart(ctx, {
type: "bar",
data: {
labels: xlabels,
datasets:[
{
label: series01name,
data: series01data,
backgroundColor: series01bgcolor,
borderColor: series01linecolor,
borderWidth: 1,
},
{
label: series02name,
data: series02data,
backgroundColor: series02bgcolor,
borderColor: series02linecolor,
borderWidth: 1,
}
// ３つ以上系列を描画する場合は上のセットを追加する
]
},
options: {
scales: {
y: {
display: true,
suggestedMax: ymax,
suggestedMin: ymin,
ticks: {
stepSize: ystep,
},
}
}
}
});
</script>水平棒グラフ
棒グラフを横に表示するのが水平棒グラフ。
縦横の軸を入れ替えるだけで水平棒グラフになります。
スクロールできます
| 項目 | 概要 |
|---|---|
| axis | 系列の軸を指定する。 |
| indexAxis | データの基準となる軸を指定する。水平棒グラフの場合は ‘y’ を指定。 |
グラフのスクリプトを表示
<canvas id="myChart2" style="padding: 10px;"></canvas>
<script>
// 縦軸のラベル
var ylabels = ["A", "B", "C", "D"];
// １つ目の系列の情報を設定
var series01name = "データ１"; // 系列１の名前
var series01data = [ 10, 30, 20, 25]; // 系列１データ
var series01bgcolor = "rgba(255, 99, 132, 0.2)"; // 系列１の塗りつぶし色
var series01linecolor = "rgba(255, 99, 132, 1.0)"; // 系列１の線の色
// ２つ目の系列の情報を設定
var series02name = "データ２";
var series02data = [ 35, 15, 35, 15];
var series02bgcolor = "rgba(255, 200, 132, 0.2)";
var series02linecolor = "rgba(255, 200, 132, 1.0)";
// ３つ目の系列の情報を設定
var series03name = "データ３";
var series03data = [ 50, 0, 35, 15];
var series03bgcolor = "rgba(132, 255, 200, 0.2)";
var series03linecolor = "rgba(132, 255, 200, 1.0)";
// ４つ目の系列の情報を設定
var series04name = "データ４";
var series04data = [ 5, 55, 10, 45];
var series04bgcolor = "rgba(132, 200, 255, 0.2)";
var series04linecolor = "rgba(132, 200, 255, 1.0)";
// ５つ以上系列を描画する場合は上のセットを追加する
// グラフ縦軸の最大／最小／目盛りの間隔を設定
var xmax = 60; // グラフ縦軸の最大
var xmin = 0; // グラフ縦軸の最小
var xstep = 10; // グラフ縦軸の目盛り線を引く間隔
var ctx = document.getElementById("myChart2").getContext("2d");
var myChart2 = new Chart(ctx, {
type: "bar",
data: {
labels: ylabels,
datasets:[
{
axis: 'y',
label: series01name,
data: series01data,
backgroundColor: series01bgcolor,
borderColor: series01linecolor,
borderWidth: 1,
},
{
axis: 'y',
label: series02name,
data: series02data,
backgroundColor: series02bgcolor,
borderColor: series02linecolor,
borderWidth: 1,
},
{
axis: 'y',
label: series03name,
data: series03data,
backgroundColor: series03bgcolor,
borderColor: series03linecolor,
borderWidth: 1,
},
{
axis: 'y',
label: series04name,
data: series04data,
backgroundColor: series04bgcolor,
borderColor: series04linecolor,
borderWidth: 1,
}
// ５つ以上系列を描画する場合は上のセットを追加する
]
},
options: {
indexAxis: 'y',
scales: {
x: {
display: true,
suggestedMax: xmax,
suggestedMin: xmin,
ticks: {
stepSize: xstep,
},
},
y: {
display: true,
}
}
}
});
</script>水平棒グラフ＆100%積み上げグラフ
棒グラフも積み上げることができます。
やり方は至って簡単。
stackedを指定して、各データを100%になるように指定するだけです。
スクロールできます
| 項目 | 概要 |
|---|---|
| stacked | trueを設定することで系列の値を積み上げる。 |
グラフのスクリプトを表示
<canvas id="myChart3" style="padding: 10px;"></canvas>
<script>
// 縦軸のラベル
var ylabels = ["A", "B", "C", "D"];
// １つ目の系列の情報を設定
var series01name = "データ１"; // 系列１の名前
var series01data = [ 10, 30, 20, 25]; // 系列１データ
var series01bgcolor = "rgba(255, 99, 132, 0.2)"; // 系列１の塗りつぶし色
var series01linecolor = "rgba(255, 99, 132, 1.0)"; // 系列１の線の色
// ２つ目の系列の情報を設定
var series02name = "データ２";
var series02data = [ 35, 15, 35, 15];
var series02bgcolor = "rgba(255, 200, 132, 0.2)";
var series02linecolor = "rgba(255, 200, 132, 1.0)";
// ３つ目の系列の情報を設定
var series03name = "データ３";
var series03data = [ 50, 0, 35, 15];
var series03bgcolor = "rgba(132, 255, 200, 0.2)";
var series03linecolor = "rgba(132, 255, 200, 1.0)";
// ４つ目の系列の情報を設定
var series04name = "データ４";
var series04data = [ 5, 55, 10, 45];
var series04bgcolor = "rgba(132, 200, 255, 0.2)";
var series04linecolor = "rgba(132, 200, 255, 1.0)";
// ５つ以上系列を描画する場合は上のセットを追加する
// グラフ縦軸の最大／最小／目盛りの間隔を設定
var xmax = 100; // グラフ縦軸の最大
var xmin = 0; // グラフ縦軸の最小
var xstep = 10; // グラフ縦軸の目盛り線を引く間隔
var ctx = document.getElementById("myChart3").getContext("2d");
var myChart3 = new Chart(ctx, {
type: "bar",
data: {
labels: ylabels,
datasets:[
{
axis: 'y',
label: series01name,
data: series01data,
backgroundColor: series01bgcolor,
borderColor: series01linecolor,
borderWidth: 1,
},
{
axis: 'y',
label: series02name,
data: series02data,
backgroundColor: series02bgcolor,
borderColor: series02linecolor,
borderWidth: 1,
},
{
axis: 'y',
label: series03name,
data: series03data,
backgroundColor: series03bgcolor,
borderColor: series03linecolor,
borderWidth: 1,
},
{
axis: 'y',
label: series04name,
data: series04data,
backgroundColor: series04bgcolor,
borderColor: series04linecolor,
borderWidth: 1,
}
// ５つ以上系列を描画する場合は上のセットを追加する
]
},
options: {
indexAxis: 'y',
scales: {
x: {
display: true,
stacked: true,
suggestedMax: xmax,
suggestedMin: xmin,
ticks: {
stepSize: xstep,
},
},
y: {
display: true,
stacked: true,
}
}
}
});
</script>
コメント