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

我正在努力实现一个个人网站，利用同步图表来显示天气数据。 在这里的人的帮助下，我成功地让站点从JSON文件加载数据，正确格式化图表，同步x轴缩放，同时显示页面上所有图表的工具提示和十字线。 但是有一个bug，当鼠标离开图表区域时，图表上的工具提示和十字光标只会淡出

当鼠标离开单个图表时，有没有办法使工具提示和十字光标淡出

上一个问题有指向JSFIDLES的链接，其中显示了问题：

更新： 我已经知道如何在光标离开图表区域时触发mouseOut事件，但是我仍然在努力使用触发隐藏工具提示和十字线所需的代码

plotOptions: {
      spline: {
        events: {
          mouseOut: function() {
              console.log('Chart Clear!');
            }
      }
    },

要了解问题，最好参考JSFIDLE

更新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：

我在这里找到了以下代码：

但我不确定它是如何包含在我的代码中的：

---

有人能告诉我如何在我的代码中实现上述功能吗？

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

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

并添加事件功能以清除工具提示和点状态

$('#mainContainer').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);

    chart.series.forEach(function(s) {
      point = s.searchPoint(event, true);

      if (point) {
        point.setState('');
      }
    });

    chart.tooltip.hide();
    chart.xAxis[0].hideCrosshair();
  }
});

---

现场演示：

非常好，谢谢。这种方法是否也能让我将SyncronizeCrosshiers函数替换为in-one-in，因为这更简单，我也想实现它？我注意到您已经修改了示例中的代码以在我的版本中工作，您能否确认同步十字准线的代码是否也需要修改？您好@ashenshugar，是的，当然-这是一个通用的解决方案。感谢您的确认。我曾尝试在上面的示例中使用该函数，但未能使其正常工作。我将提出一个新问题，以便其他人可以轻松地搜索和查找。嗨@ashenshugar，我已将解决方案改编为您的示例：嗨@ashenshugar，您需要以正确的方式检查序列是否可见，例如：

$('#mainContainer').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);

    chart.series.forEach(function(s) {
      point = s.searchPoint(event, true);

      if (point) {
        point.setState('');
      }
    });

    chart.tooltip.hide();
    chart.xAxis[0].hideCrosshair();
  }
});