HIghcharts で Stacked and grouped column を作り、その凡例(legend)を表示させると、各々のグラフ要素の名前が表示される。
それぞれが独立した値ならばそれで良いのだけど、グラフの要素内に関連性がある場合は、凡例部分もグルーピングして欲しい場合がある。この場合は、series
に渡す値の中で linkedTo
というプロパティを仕込んでやれば良いようだ。
[
{
id: 'hoge-pv',
name: 'hoge-page-view',
stack: 'pv',
data: [10, 20, 30, 40, 50]
},
{
id: 'hoge-cv',
name: 'hoge-page-conversion',
stack: 'cv',
data: [5, 10, 15, 20, 25],
linkedTo: 'hoge-pv'
}
]
上記の例だと、id: 'hoge-cv'
が id: 'hoge-pv'
とリンクする関係になる。凡例の部分には、リンク先である hoge-pv
の name
が表示される。上記の場合では、hoge-page-view
が該当する。
ここでは説明用に name をそれぞれ分けたけど、実際の凡例に使う場合は、両方とも name: 'hoge-page'
にしてしまっても良いのではないかと思っている。name
の重複は問題ないようだし。
Highcharts のマニュアルだと、 xAxis.linkedTo や yAxis.linkedTo に書かれているけど、series
の中に書いても反映してくれた。
また、マニュアルだと、linkedTo
に指定するのは Number
となっているが、series
の id
を指定した上記の方式でも意図通りの動作になってくれたので、この辺はどこかのバージョンで対応してくれたのかも知れない(たまたま動いているって場合も考えられなくはないけど…)