HighChart图例我覆盖了鼠标移动，但却失去了透明功能。我如何保留它？

Question

plotOptions: {
   series: {
     events: {
       afterAnimate: function () {
         for (let item of this.chart.legend.allItems) {
           item.legendItem.on('mouseover', function (e) {
                /**
                 * Register a callback based on the legend selected
                 */
           }).on('mouseout', function (e) {
                /**
                 * Degerister a callback
           })
         }
       }
     },

我希望在鼠标移到图例项上时增加功能，但上面的功能取消了默认的透明功能。 我如何才能轻松地重新调用？

Answer 1

你可以为事件函数添加一部分默认代码。

plotOptions: {
  series: {
    events: {
      afterAnimate: function() {
        const legend = this.chart.legend,
          boxWrapper = legend.chart.renderer.boxWrapper;

        for (let item of legend.allItems) {
          let isPoint = item instanceof Highcharts.Point,
            activeClass = 'highcharts-legend-' +
            (isPoint ? 'point' : 'series') + '-active';

          item.legendItem.on('mouseover', function(e) {
            if (item.visible) {
              legend.allItems.forEach(function(inactiveItem) {
                if (item !== inactiveItem) {
                  inactiveItem.setState('inactive', !isPoint);
                }
              });
            }
            item.setState('hover');

            if (item.visible) {
              boxWrapper.addClass(activeClass);
            }

          }).on('mouseout', function(e) {
            legend.allItems.forEach(function(inactiveItem) {
              if (item !== inactiveItem) {
                inactiveItem.setState('', !isPoint);
              }
            });

            boxWrapper.removeClass(activeClass);
            item.setState();
          })
        }
      }
    }
  }
}

---

现场演示。 http:/jsfiddle.netBlackLabel6m4e8x0y5000