Chart.jsを使って二軸グラフを表示するためのスクリプトサンプルです。
コピペして流用しやすいよう、データなど書き換えが必要な部分はスクリプトの最初のほうに変数としてまとめて書いています。
ここで掲載しているサンプルはChart.jsの v3.7.0 向けです。
v2.x.x系のようにメジャーバージョンが異なる場合、v.3系でもマイナーバージョンが異なる場合は正しく表示できないものもありますので注意。
目次
二軸グラフ（2種類の折れ線を表示）
尺度の異なる2種類の折れ線グラフを1つのグラフで表現するには、左右異なる軸で表現する二軸グラフを有効に使いましょう。
options.scalesで、それぞれの軸に名前をつけて定義します。（ここではy1とy2）
一方のpotisionにleft、もう一方にrightを指定することで左右両端の軸を設定できます。
また、それぞれの軸のグリッドの間隔がバラバラに引かれると見づらいので、片方のグリッドの罫線を引かないようにdrawOnChartAreaにfalseを指定します。
スクロールできます
| 項目 | 概要 |
|---|---|
| potision | 軸を表示する位置を指定する。 |
| drawOnChartArea | チャートエリアに罫線を引くかどうかを指定する。 |
グラフのスクリプトを表示
<canvas id="myChart1" style="padding: 10px;"></canvas>
<script>
// 横軸のラベル
var xlabels = ["A", "B", "C", "D", "E", "F", "G"];
// １つ目の系列の情報を設定
var series01name = "データ１"; // 系列１の名前
var series01data = [ 10, 40, 30, 20, 15, 45, 35]; // 系列１データ
var series01bgcolor = "rgba(255, 99, 132, 0.2)"; // 系列１の塗りつぶし色
var series01linecolor = "rgba(255, 99, 132, 1.0)"; // 系列１の線の色
// ２つ目の系列の情報を設定
var series02name = "データ２";
var series02data = [ 105, 95, 65, 120, 100, 80, 75];
var series02bgcolor = "rgba(255, 200, 132, 0.2)";
var series02linecolor = "rgba(255, 200, 132, 1.0)";
// ３つ以上系列を描画する場合は上のセットを追加する
// グラフ縦軸の最大／最小／目盛りの間隔を設定
var y1max = 50; // グラフ縦軸の最大
var y1min = 0; // グラフ縦軸の最小
var y1step = 10; // グラフ縦軸の目盛り線を引く間隔
var y2max = 130; // グラフ縦軸の最大
var y2min = 60; // グラフ縦軸の最小
var y2step = 10; // グラフ縦軸の目盛り線を引く間隔
var ctx = document.getElementById("myChart1").getContext("2d");
var myChart1 = new Chart(ctx, {
data: {
labels: xlabels,
datasets:[
{
type: "line",
label: series01name,
data: series01data,
backgroundColor: series01bgcolor,
borderColor: series01linecolor,
borderWidth: 1,
yAxisID: "y1",
},
{
type: "line",
label: series02name,
data: series02data,
backgroundColor: series02bgcolor,
borderColor: series02linecolor,
borderWidth: 1,
yAxisID: "y2",
}
// ３つ以上系列を描画する場合は上のセットを追加する
]
},
options: {
scales: {
y1: {
type: "linear",
position: "left",
display: true,
max: y1max,
min: y1min,
ticks: {
stepSize: y1step,
},
},
y2: {
type: "linear",
position: "right",
display: true,
max: y2max,
min: y2min,
ticks: {
stepSize: y2step,
},
grid: {
drawOnChartArea: false,
},
},
}
}
});
</script>二軸グラフ（折れ線グラフと棒グラフ）
二軸グラフは異なるタイプのグラフも表示できます。
各データセットのタイプを指定するだけで、作成できます。
グラフのスクリプトを表示
<canvas id="myChart2" style="padding: 10px;"></canvas>
<script>
// 横軸のラベル
var xlabels = ["A", "B", "C", "D", "E", "F", "G"];
// １つ目の系列の情報を設定
var series01name = "データ１"; // 系列１の名前
var series01data = [ 10, 40, 30, 20, 15, 45, 35]; // 系列１データ
var series01bgcolor = "rgba(255, 99, 132, 0.2)"; // 系列１の塗りつぶし色
var series01linecolor = "rgba(255, 99, 132, 1.0)"; // 系列１の線の色
// ２つ目の系列の情報を設定
var series02name = "データ２";
var series02data = [ 105, 95, 65, 120, 100, 80, 75];
var series02bgcolor = "rgba(255, 200, 132, 0.2)";
var series02linecolor = "rgba(255, 200, 132, 1.0)";
// ３つ以上系列を描画する場合は上のセットを追加する
// グラフ縦軸の最大／最小／目盛りの間隔を設定
var y1max = 50; // グラフ縦軸の最大
var y1min = 0; // グラフ縦軸の最小
var y1step = 10; // グラフ縦軸の目盛り線を引く間隔
var y2max = 120; // グラフ縦軸の最大
var y2min = 60; // グラフ縦軸の最小
var y2step = 10; // グラフ縦軸の目盛り線を引く間隔
var ctx = document.getElementById("myChart2").getContext("2d");
var myChart1 = new Chart(ctx, {
data: {
labels: xlabels,
datasets:[
{
type: "bar",
label: series01name,
data: series01data,
backgroundColor: series01bgcolor,
borderColor: series01linecolor,
borderWidth: 1,
yAxisID: "y1",
},
{
type: "line",
label: series02name,
data: series02data,
backgroundColor: series02bgcolor,
borderColor: series02linecolor,
borderWidth: 1,
yAxisID: "y2",
}
// ３つ以上系列を描画する場合は上のセットを追加する
]
},
options: {
scales: {
y1: {
type: "linear",
position: "left",
display: true,
max: y1max,
min: y1min,
ticks: {
stepSize: y1step,
},
},
y2: {
type: "linear",
position: "right",
display: true,
max: y2max,
min: y2min,
ticks: {
stepSize: y2step,
},
grid: {
drawOnChartArea: false,
},
},
}
}
});
</script>
コメント