html - Highcharts:在图例悬停时突出显示折线图系列

Question

Highcharts 提供了一种在将鼠标悬停在系列或其关联的图例项上时增加系列线宽的方法

Highcharts.chart('container', {
xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
    series: {
        states: {
            hover: {
                enabled: true,
                lineWidth: 5
            }
        }
    }
},
series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]});

Highcharts 还提供了一种在图例元素悬停时为图例元素赋予颜色的方法

  Highcharts.chart('container', {
    xAxis: {
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 
     'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    legend: {
     itemHoverStyle: {
        color: 'red',
     }
    },
    series: [{
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 
      216.4, 194.1, 95.6, 54.4]
    }]});

有没有办法将两者结合起来，并在图例项悬停时为关联的图表系列赋予与图例项的突出显示颜色相同的颜色？ 所以就像这个jsfiddle http://jsfiddle.net/56wL9oxs/ 除了当图例元素悬停时图表系列线也会以红色突出显示。目前正在使用 Angular 6+，因此正在寻找一种非 jquery 的方式来实现它。 谢谢!

Answer 1

遗憾的是，Highcharts 不提供此类功能。然而，它可以通过覆盖负责悬停事件的图例原型(prototype)函数轻松实现。

这个函数是Highcharts.Legend.prototype.setItemEvents。在那里你会发现 mouseover 和 mouseout 触发函数可以访问特定的系列实例。因此，在 mouseover 函数中，您必须将系列线和每个系列点的颜色更改为 red(元素 - 系列引用):

item.graph.attr({
  stroke: 'red'
});

item.points.forEach(function(point) {
  point.graphic.attr({
    fill: 'red'
  });
});

接下来，在 mouseout 函数中将颜色重置为默认颜色。要做到这一点，只需将默认颜色保存在系列对象中并在 mouseout 函数中使用它:

// item - series reference
if (!item.initColor) {
  item.initColor = item.color;
}

// piece of code inside mouseout function
item.graph.attr({
  stroke: item.initColor
});

item.points.forEach(function(point) {
  point.graphic.attr({
    fill: item.initColor
  });
});

整个包装器代码:

(function(H) {
  H.Legend.prototype.setItemEvents = function(item, legendItem, useHTML) {
    var legend = this,
      merge = H.merge,
      fireEvent = H.fireEvent,
      Point = H.Point,
      boxWrapper = legend.chart.renderer.boxWrapper,
      activeClass = 'highcharts-legend-' +
      (item instanceof Point ? 'point' : 'series') + '-active';

    if (!item.initColor) {
      item.initColor = item.color;
    }
    // Set the events on the item group, or in case of useHTML, the item
    // itself (#1249)
    (useHTML ? legendItem : item.legendGroup)
    .on('mouseover', function() {
        item.setState('hover');

        // A CSS class to dim or hide other than the hovered series
        boxWrapper.addClass(activeClass);

        legendItem.css(legend.options.itemHoverStyle);

        item.graph.attr({
          stroke: 'red'
        });

        item.points.forEach(function(point) {
          point.graphic.attr({
            fill: 'red'
          });
        });

      })
      .on('mouseout', function() {

        legendItem.css(
          merge(item.visible ? legend.itemStyle : legend.itemHiddenStyle)
        );


        // A CSS class to dim or hide other than the hovered series
        boxWrapper.removeClass(activeClass);

        item.setState();

        item.graph.attr({
          stroke: item.initColor
        });

        item.points.forEach(function(point) {
          point.graphic.attr({
            fill: item.initColor
          });
        });
      })
      .on('click', function(event) {
        var strLegendItemClick = 'legendItemClick',
          fnLegendItemClick = function() {
            if (item.setVisible) {
              item.setVisible();
            }
          };

        // A CSS class to dim or hide other than the hovered series. Event
        // handling in iOS causes the activeClass to be added prior to click
        // in some cases (#7418).
        boxWrapper.removeClass(activeClass);

        // Pass over the click/touch event. #4.
        event = {
          browserEvent: event
        };

        // click the name or symbol
        if (item.firePointEvent) { // point
          item.firePointEvent(
            strLegendItemClick,
            event,
            fnLegendItemClick
          );
        } else {
          fireEvent(item, strLegendItemClick, event, fnLegendItemClick);
        }
      });
  }
})(Highcharts);

演示:
https://jsfiddle.net/wchmiel/cdaruenv/

API引用:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr