下のグラフ1，2のような縦軸の目盛りの粒度がちがう2つのグラフを一つにまとめて表示させたいです。
現状、縦軸の表示が一つしかできてない為、同じグラフにまとめて表示させると値が小さいほうのグラフの値が小さくほぼ見えない状態になってしまいます
そこでイメージ図のように左右に別の目盛りを棒グラフで表示させるような方法があれば教えていただけると幸いです。
よろしくお願いいたします。
ご質問ありがとうございます。
ビジュアルタイプが「垂直棒グラフ」の場合、ご指摘のようにY軸は一つしか持つことができません。
もし同じ垂直棒グラフのまま二つめのY軸を表示したい場合には「Highcharts」のビジュアルタイプを使うことで実現が可能です。
チャートコードは以下を参考にしてみてください。
{
"xAxis": {
"categories": ["getColumn", 0]
},
"yAxis": [{
"min": 0,
"title": {
"text": "一つ目のY軸"
}
},{
"min": 0,
"title": {
"text": "二つ目のY軸"
},
"opposite": true
}
],
"plotOptions": {
"column": {
"borderWidth": 0,
"grouping": false,
"shadow": false
}
},
"series": [
{
"type": "column",
"name": "左側のY軸",
"color": "rgba(157,195,230,1)",
"data": ["getColumn", 2],
"pointPadding": 0.3,
"pointPlacement": -0.15
},
{
"type": "column",
"name": "右側のY軸",
"color": "rgba(68,114,196,1)",
"data": ["getColumn", 3],
"pointPadding": 0.3,
"pointPlacement": 0.15,
"yAxis": 1
}
]
}
なお、棒グラフのまま左右のY軸を表示した場合、どの値がどちらの軸に準拠しているかわかりずらいと思います。「クラスター棒コンボグラフ」を使うことで棒グラフは左のY軸、折れ線グラフは右のY軸となり、読み手の視認性も高まるかと思います。ご参考にしていただけますと幸いです。
2 Likes
ご回答ありがとうございます。
ご教授いただいた内容を試し二つの値のに対しそれぞれY軸を作成し表示させることが出来ました。
一点追加で質問なのですが、今回2つの値に対しY軸を左右別軸で表示することは出来たのですが、値の数が3つ等、2つ以上の場合も可能なのでしょうか。
例を挙げると値1,2,3の3つがある場合
値1,2は1つ目のY軸で表示、値3は2つ目のY軸で表示のイメージです。
@ytkd ご確認ありがとうございます。
はい、チャートコードの “series” ブロックがプロット対象の値の配列になるため、こちらに3つ目の値を追加し、“yAxis” で左右どちらの軸に合わせるかを指定ください。
yAxis: 0 もしくは指定なし ⇒左側
yAxis: 1 ⇒右側
ご回答ありがとうございます。
ご提示いただいた方法で解決することが出来ました。
この度はご回答ありがとうございました。