Javascript （HighCharts）手动鼠标悬停后，鼠标悬停时颜色恢复

我试图使某个组中的某个点在鼠标悬停时呈现相同的颜色。我已经成功地将点跳到前面并高亮显示，但由于某种原因，鼠标移出后，悬停在上面的实际点会恢复为基础颜色，但仅在第一次鼠标移出/mouseover时

更令人困惑的是，在第二次鼠标滑过后，颜色似乎保持不变。我做错了什么

JSFIDLE内容：

var point_color=“rgba（0,80186,0.1）”；
var hover_color=“rgba（255166,38,1）”；
所选变量={
x:null，y:null，g:null，
集合：函数（点）{
对于（k点）{
此[k]=点[k]；
}
}, 
检查：功能（点）{
返回值（点g==此点g）；
}
};
var dis={enabled:false}；
函数生成_数据（n）{
var out=[]；
对于（变量i=0；i

虽然我不确定第一次发生的原因，而不是第二次发生的原因，但我确定它与某一点的

mouseOut

事件有关。显然，在幕后发生了一些事情来“取消标记”事件触发的时间点。我无法禁用

mouseOut

（无

null

，

false

），但如果可能的话，我相信这是最好的方法

通过选择点，我可以避免弄乱您的绘画工作，如（）所示：

我不确定这是否会以任何方式影响您的计划，但为了避免选择太多的点，我在

mouseOut

上超时以取消选择该点。如果这不重要，你可以忽略它

希望有人能找到一个更简单的解决方法，但它应该能给你一个解决办法

---

起初，我认为您可以使用

plotOptions.series.stickyTracking:true

（）解决此问题。只要你停留在图表区域内，它就可以工作，但一旦你离开图表，它就会触发

鼠标出

，结果并没有真正解决问题。

虽然我不确定为什么第一次发生，而不是第二次，但我肯定它与

鼠标出

事件有一定的关系。显然，在幕后发生了一些事情来“取消标记”事件触发的时间点。我无法禁用

mouseOut

（无

null

，

false

），但如果可能的话，我相信这是最好的方法

通过选择点，我可以避免弄乱您的绘画工作，如（）所示：

我不确定这是否会以任何方式影响您的计划，但为了避免选择太多的点，我在

mouseOut

上超时以取消选择该点。如果这不重要，你可以忽略它

希望有人能找到一个更简单的解决方法，但它应该能给你一个解决办法

---

起初，我认为您可以使用

plotOptions.series.stickyTracking:true

（）解决此问题。只要你停留在图表区域内，它就可以工作，但一旦你离开图表，它就会触发

鼠标出

，结果并没有真正解决问题。

虽然我不确定为什么第一次发生，而不是第二次，但我肯定它与

鼠标出

事件有一定的关系。显然，在幕后发生了一些事情来“取消标记”事件触发的时间点。我无法禁用

mouseOut

（无

null

，

false

），但如果可能的话，我相信这是最好的方法

通过选择点，我可以避免弄乱您的绘画工作，如（）所示：

我不确定这是否会以任何方式影响您的计划，但为了避免选择太多的点，我在

mouseOut

上超时以取消选择该点。如果这不重要，你可以忽略它

希望有人能找到一个更简单的解决方法，但它应该能给你一个解决办法

---

起初，我认为您可以使用

plotOptions.series.stickyTracking:true

（）解决此问题。只要你停留在图表区域内，它就可以工作，但一旦你离开图表，它就会触发

鼠标出

，结果并没有真正解决问题。

虽然我不确定为什么第一次发生，而不是第二次，但我肯定它与

鼠标出

事件有一定的关系。显然，在幕后发生了一些事情来“取消标记”事件触发的时间点。我不能

var point_color = "rgba(0,80,186,0.1)";
var hover_color = "rgba(255,166,38,1)";
var selected = {
  x : null, y : null, g : null,
  set : function(point) { 
    for (k in point) {
      this[k] = point[k];
    }
  }, 
  check : function(point) {
    return (point.g == this.g);
  }
};

var dis = { enabled: false };

function generate_data(n) {
  var out = [];
    for (var i=0; i < n; i++) {
      var g = (Math.random() < 0.5 ? 'A' : 'B');
      out.push(
        {
         'x' : Math.random(), 
         'y' : Math.random(), 
         'g' : g
        }
      )
    };
  return out;
}

function highlight(point) {
  for (var i=0, l=point.series.data.length; i < l; i++) {
      if (!selected.check(this) && point.series.data[i].graphic) {
          point.series.data[i].graphic.attr('fill', point_color);
      }
  }      
  selected.set(point);
  // highlight points of same group
  for (var i=0, l=point.series.data.length; i < l; i++) {
    if (selected.check(point.series.data[i]) && point.series.data[i].graphic) {
      point.series.data[i].graphic.toFront();
      point.series.data[i].graphic.attr('fill', hover_color);
    }
  }    
}

$(function () {
  $('#container').highcharts({
      // Disable lots of junk
      chart: {type: 'scatter'}, title: {text: ''},
      legend: dis, credits: dis, tooltip : dis,
      xAxis: {labels: dis}, yAxis: {title: {text: ''}, labels: dis},
      series: [{'data' :  generate_data(100) }],
      // Hover behavior
      plotOptions: {
        series: {
          marker : {
            lineWidth : 1,
            lineColor : "rgba(0,80,186,0.4)",
            fillColor : point_color
          },           
          states: {hover: dis}, // Disable normal hover behavior
          point: {
            events: {
              mouseOver: function () { highlight(this); }
            }
          }
        }
      }
  });
});

events: {
    mouseOver: function () { highlight(this); this.selected = true; },
    mouseOut: function () { var point = this; setTimeout(function() { point.selected = false; }, 100); }
}