鼠标离开图表时，并非所有工具提示和十字线都不会从同步图表中消失

Question

我正在努力建立一个利用同步图表显示天气数据的个人网站。我已经在这里的人们的帮助下进行管理，以使该站点从JSON文件加载数据，正确设置图表格式并同步x轴缩放以及页面上所有图表的显示工具提示和十字线。但是，这里有一个错误，当鼠标离开图表区域时，工具提示和十字线只会消失。

当鼠标离开单个图表时，有没有一种方法可以使工具提示和十字线褪色？

上一个问题有指向jsfiddles的链接，这些链接显示了此问题：Capturing touch events (touchstart and touchmove) in addition to mousemove for synchronising highcharts

更新：我已经弄清楚了当光标离开图表区域时如何触发mouseOut事件，但是我仍在为触发隐藏工具提示和十字线所需的代码而苦苦挣扎。

plotOptions: {
      spline: {
        events: {
          mouseOut: function() {
              console.log('Chart Clear!');
            }
      }
    },
最好引用的jsfiddle，看到的问题是jsfiddle.net/BlackLabel/xLsdrco8
更新2：

查看Highcharts网站上的同步图表示例，他们具有以下内容

// Override the reset function, we don't need to hide the tooltips and crosshairs.
Highcharts.Pointer.prototype.reset = function () {
  //Is this is where I would put code to hide the tooltips and crosshairs?
};
我现在已将此代码包含在我的页面中，因为它停止了任何工具提示，并且十字准线逐渐淡出，但是，当光标不在图表上时，我仍然希望它们全部消失。
更新3：

我在这里找到以下代码：http://jsfiddle.net/mushigh/a3kjrz6u/

$('#container').bind('mouseleave mouseout ', function(e) {
    var chart,
      point,
      i,
      event;

    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
      chart = Highcharts.charts[i];
      event = chart.pointer.normalize(e.originalEvent);
      point = chart.series[0].searchPoint(event, true);

      point.onMouseOut(); 
      chart.tooltip.hide(point);
      chart.xAxis[0].hideCrosshair(); 
    }
  });
但是我不确定它如何将其包含在我的代码中：http://jsfiddle.net/ashenshugar/716jx4n9/
有人可以告诉我如何在我的代码中实现以上功能吗？

我正在努力建立一个利用同步图表显示天气数据的个人网站。我已经在这里的人们的帮助下进行了管理，以使网站从JSON文件加载数据，...

Answer 1

您可以将图表容器打包到某些父元素中：

<div id="mainContainer">
  <div id="chart1_container" style="height: 400px"></div>
  <div id="chart2_container" style="height: 400px"></div>
  ...
</div>