Question

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

public Map<String,List<Object>> batchLoad(Iterable<? extends Object> itemsToGet)

public Map<String,List<Object>> batchLoad(Map<Class<?>,List<KeyPair>> itemsToGet)

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

当图例项悬停在上面时，是否有一种方法可以将两者组合在一起并赋予关联的图表系列与图例项的突出显示颜色相同的颜色？所以就像这个jsfiddle http://jsfiddle.net/56wL9oxs/ 当图例项悬停时，图表系列线也将以红色突出显示。当前使用Angular 6+，因此正在寻找一种非jquery的方式。谢谢！

Answer 1

不幸的是，Highcharts没有提供这种功能。但是，可以通过重写负责悬停事件的图例原型功能来轻松实现。

此功能为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

Highcharts：突出显示图例悬停时的折线图系列

1 个答案: