chart.jsで第2軸を追加する方法
2017/09/24
chart.jsでグラフの第2軸を表示する方法を紹介します。第2軸は下図のように複数のグラフを別々のスケールで表示するために使います(左側のスケールと右側のスケールの2つを使用)。これを使えるとグラフの表現が一気に向上します。
第二軸を表示するための方法
options->scalesのyAxes内に設定を2セット追加します。1つ目は1軸目なので特に特別なことはせず、2つ目に第2軸用の設定を行います。また、同様にdata->datasetsにもセットを2つ指定し、2つ目を第二軸のデータセットとします。具体的には以下のような設定で第二軸を利用できます。
- optionsのscalesのyAxesを2つ設定する ・2軸目にする方のpositionをrightに設定 ・2軸目にする方のyAxesのIDを設定する
- 第2軸を利用するグラフのデータセットのyAxisIDに1で設定したIDを指定する
chart = new Chart(ctx, {
type: 'bar',
data: {
...
datasets: [{ //第2軸のデータセット
...
yAxisID: "y-right" //第2軸のID指定
},{ //第1軸のデータセット
... //ID指定なしの場合第1軸となる
}]
},
options: {
scales: {
xAxes:[{
...
}],
yAxes: [{ //第1軸の軸設定
... //position指定なしで第1軸になる
},
{ //第2軸の軸設定
id: "y-right", //第2軸にするグラフにはこのIDを指定する
position: "right", //第2軸(右側軸)になる
...
}]
}
}
});