javascript - (HighCharts) 手动 mouseOver 后 mouseOut 上的颜色恢复

Question

JSFiddle Example

当鼠标悬停在某个组中的一个点上时，我试图使该组的点显示相同的颜色。我已成功获得跳转到前面并突出显示的点，但由于某种原因，鼠标移开后，实际悬停的点会恢复为基色但仅在第一次鼠标悬停/鼠标移开时。

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

JSFiddle 内容:

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); }
            }
          }
        }
      }
  });
});

Answer 1

尝试使用point.update()而不是使用填充参数。示例:http://jsfiddle.net/DUZz9/6/