如何将悬停效果应用到Highcharts中选定的散点?

6yoyoihd  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(189)

我有一个简单的Highcharts散点图,允许点选择。正常的未选择的点有默认的Highcharts悬停效果,我希望选择的点也有悬停效果。plotOptions.scatter.marker.states选项似乎允许设置每个状态的颜色,但是selecthover看起来是互斥的。我找不到一种方法来设置一个既被选中又被悬停的点的属性。我该怎么做呢?

这里有一把小提琴在https://jsfiddle.net/cfarmerga/b7kaf9dc/2/

"plotOptions": {"scatter": {
      "allowPointSelect": true,
      "marker": {
        "states": {
            "select": {
                "fillColor": "magenta",
            },
          "normal": {
                "fillColor": "green",
            },
          "hover": {
            "fillColor": "orange",
            "radiusPlus": 2
          }
        }
      }
    }},
iih3973s

iih3973s1#

您可以尝试将marker.states.select设置为悬停。

plotOptions: {
    series: {
      allowPointSelect: true,
      marker: {
        states: {
          select: {
            lineColor: 'rgba(100,100,200, 0.25)',
            fillColor: null,
            lineWidth: 10,
            radius: 6,
          },
          hover: {
            lineColor: 'rgba(100,100,200, 0.25)',
            fillColor: null,
            lineWidth: 10,
            radius: 6,
          },
        }
      }
    }
  },

然后修改核心Highcharts代码并将其扩展为适当的行为。

(function(H) {
  H.wrap(H.Point.prototype.firePointEvent = function(eventType, eventArgs, defaultFunction) {
    var point = this,
      series = this.series,
      seriesOptions = series.options;
    // load event handlers on demand to save time on mouseover/out
    if (seriesOptions.point.events[eventType] ||
      (point.options &&
        point.options.events &&
        point.options.events[eventType])) {
      point.importEvents();
    }
    // add default handler if in selection mode
    if (eventType === 'click' && seriesOptions.allowPointSelect) {
      defaultFunction = function(event) {
        // Control key is for Windows, meta (= Cmd key) for Mac, Shift
        // for Opera.
        if (point.select) { // #2911
          point.select(null, true);

        }
      };
    }
    H.fireEvent(point, eventType, eventArgs, defaultFunction);
  });
}(Highcharts));

可能解决方案的概念:http://jsfiddle.net/BlackLabel/79cmw28g/2/

相关问题