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 не предоставляет такой функциональности.Однако это может быть легко достигнуто путем перезаписи функции-прототипа легенды, отвечающей за события наведения.

Эта функция 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