highcharts多图表联动

highcharts官网的案例 | JShare 官网例子

官网的例子只能竖着放图表，而且tooltip不会消失，且Highcharts的配置会影响其它的图表

整了个可以横着也能联动的，且配置不会影响到其它不联动图表

主要代码

<div class="container">
  <div id="container1" style="width:45%;height:300px"></div>
  <div id="container2" style="width:45%;height:300px"></div>
</div>
<div class="container">
 <div id="container3" style="width:45%;height:300px"></div>
 <div id="container4" style="width:45%;height:300px"></div>
</div>
<div id="container5" style="width:80%;height:300px"></div>

//绑定对应的事件
['mousemove', 'touchmove', 'touchstart'].forEach(function (eventType) {
  [1,2,3,4].forEach(k=>{
    document.getElementById('container'+k).addEventListener(
      eventType,
      function (e) {
        var chart,
          point,
          i,
          event;
        for (var i = 0; i < Highcharts.charts.length && i<4; i = i + 1) {
          chart = Highcharts.charts[i];
          if(chart.renderTo==e.currentTarget) continue;//排除自身
          var targetE = {};
          for (var l in e) {
            targetE[l] = e[l];
          }
          debugger
          targetE.pageX = e.pageX + chart.renderTo.offsetLeft - e.currentTarget.offsetLeft;
          targetE.pageY = e.pageY + chart.renderTo.offsetTop - e.currentTarget.offsetTop;

          event = chart.pointer.normalize(targetE);
          point = chart.series[0].searchPoint(event, true);
          if (point) {
            point.onMouseOver();
          }
        }
      }
    );
  })
});

通过当前鼠标点x、y位置和目标对应的位置计算实际鼠标指针应该对应的位置pageX、pageY

隐藏tooltip

[1,2,3,4].forEach(k=>{
    document.getElementById('container'+k).addEventListener(
      'mouseout',
      function (e) {
        var chart,
          point,
          i,
          event;
        for (i = 0; i < Highcharts.charts.length; i = i + 1) {
          chart = Highcharts.charts[i];
          
          chart.xAxis[0].hideCrosshair() // 隐藏十字准星线
          chart.tooltip.hide() //隐藏tooltip
          if (chart.pointer.chart.hoverPoints && chart.pointer.chart.hoverPoints.length > 0) {
            chart.pointer.chart.hoverPoints[0].onMouseOut() // 去掉鼠标状态
          }
          if (obj.chart.hoverSeries) {
            obj.chart.hoverSeries.onMouseOut() //去掉系列高亮状态
          }

        }
      }
    );
  })

去掉Highcharts本身的事件

chart1.pointer.reset = () => {
return undefined
}
chart2.pointer.reset = () => {
return undefined
}
chart3.pointer.reset = () => {
return undefined
}
chart4.pointer.reset = () => {
return undefined
}