(HighCharts)手动鼠标悬停后，鼠标悬停时颜色恢复

(HighCharts) Color reverts on mouseOut after manual mouseOver

本文关键字：悬停 鼠标 颜色 恢复 HighCharts      更新时间：2023-09-26

JSFiddle示例

我试图使某一组的点出现相同的颜色时，在组中的一个是mousedOver。我已经成功地使点跳转到前面并突出显示，但由于某种原因，实际的点悬停在鼠标移出后恢复到基本颜色，但仅在第一次鼠标移出/mouseout时。

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

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

尝试使用point.update()代替使用填充参数。例如:http://jsfiddle.net/DUZz9/6/

虽然我不确定为什么它第一次发生而不是第二次发生的细节，但我确定它与mouseOut事件有关。显然，在幕后发生了一些事情来"取消"事件触发的点。我无法禁用mouseOut(没有null, false…)，但如果这是可能的，我相信这是最好的踪迹。

我能够避免弄乱你的油漆工作，使点被选中，像这样(JSFiddle):

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

我不确定这是否会以任何方式影响你的计划，但为了避免有很多被选中的点，我在mouseOut上做了一个超时来取消选中点。如果这无关紧要，你可以忽略它。

希望有人能找到一个更直接的修复方法，但它应该给你一个解决方案。

最初我以为你可以用plotOptions.series.stickyTracking: true (JSFiddle)来修复这个问题。只要您留在图表区域内，这就可以工作，但是一旦您离开图表，它就会触发mouseOut，这最终并没有真正解决问题。

相关文章：