highcharts : 外部要素からマウスオーバーを着火する

See the Pen highcharts : 外部要素からマウスオーバーを有効にする by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

highcharts 標準で出力される凡例ではなく、グラフ外部のHTML要素からグラフのマウスオーバーを着火させたかったので試した。

HTML

凡例を構成する表のHTMLは、大まかに以下のような形。

<table class="legend-table">
  <tr class="legend-row" data-num="0"></tr>
  〜
  <tr class="legend-row" data-num="5"></tr>
</table>

行にlegend-rowクラスとdata-num属性を付与しているのが要。
（JSからの参照の仕方次第ではlegend-rowは付与しなくても良いと思えるが、可読性の面で付与した）

JS

HTML側からhighcartsのマウスオーバーを制御する処理は以下。

document.addEventListener('DOMContentLoaded', function () {
  //※highcarts描画の処理は省略
  //`chart`にチャート情報が入っている

  //以下よりマウスオーバー用の処理
  const rows = document.querySelectorAll('.legend-row');
  rows.forEach(function (row) {
      var num = row.dataset.num;
      row.addEventListener('mouseover', function() {
          chart.series[0].data.forEach(function(data) {
              data.setState('inactive');
          });
          chart.series[0].data[num].setState('hover');
          chart.tooltip.refresh(chart.series[0].points[num]);
      });
      row.addEventListener('mouseleave', function() {
          chart.series[0].data.forEach(function(data) {
              data.setState();
          });
          chart.tooltip.hide();
      });
  });
});

• まずlegend-row一式をrowsに取得
• rowsの中身をforEachで回す。
• マウスオーバーしたら…
  • まず全データのsetStateをinactiveにする（半透明化）
  • 次に、マウスオーバーしているdata-numに該当するデータのsetStateをhoverにする
  • 同様にtooltipも表示する
• マウスが外れたら、全データのsetStateとtooltipを消す