雑文発散

▼ [Highcharts] 2つのグラフの関連を表す linkedTo というプロパティを知った

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 を指定した上記の方式でも意図通りの動作になってくれたので、この辺はどこかのバージョンで対応してくれたのかも知れない（たまたま動いているって場合も考えられなくはないけど…）