Highcharts несколько серий в сочетании с проблемой зависания

Question

Я использую опцию relatedTo, чтобы связать несколько дополнительных графиков (назовем их дочерними) с одним основным графиком, чтобы получить одну группу графиков.

Моя проблема связана с выделением при наведении курсора. При наведении на основной граф подсвечиваются все дочерние элементы, а также сам основной граф. Но когда я перемещаю любой дочерний график, подсвечиваются только этот и главный, а другие дочерние объекты становятся размытыми, это не то, чего я хочу.

Highcharts.chart('container', {
  series: [{
    id: 'main',
    color: 'black',
    name: 'Main',
    type: 'line',
    data: [[1, 3], [1.5, 2.5], [2, 2], [2.5, 1.5], [3, 1]]
  }, {
    linkedTo: 'main',
    color: 'black',
    name: 'Child 1',
    type: 'line',
    data: [[2, 3], [3, 2], [4, 1]]
  }, {
    linkedTo: 'main',
    color: 'black',
    name: 'Child 2',
    type: 'line',
    data: [[3, 3], [4, 2], [5, 1]]
  }, {
    linkedTo: 'main',
    color: 'black',
    name: 'Child 3',
    type: 'line',
    data: [[4, 3], [5, 2], [6, 1]]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"/>

Есть ли обходной путь для этого случая?

Answer 1

Об этой проблеме сообщается здесь: https://github.com/highcharts/highcharts/issues/11810 и помечено как улучшение. В настоящее время в качестве обходного пути вы можете связать серию братьев и сестер в afterLinkSeries событие:

(function(H) {
  H.addEvent(H.Chart, 'afterLinkSeries', function(e) {
    this.series.forEach(function(s) {
      if (s.linkedParent) {
        s.linkedParent.linkedSeries.forEach(function(linkedS) {
          if (linkedS !== s) {
            s.linkedSeries.push(linkedS);
          }
        });
      }
    });
  });
}(Highcharts));

---

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6m4e8x0y/4972/

Документы: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

---

РЕДАКТИРОВАТЬ:

Из-за проблемы с элементом легенды нажмите Лучшее решение - переписать метод Pointer.prototype.applyInactiveState.

Highcharts.Pointer.prototype.applyInactiveState = function(points) {
  var activeSeries = [],
    series;
  // Get all active series from the hovered points
  (points || []).forEach(function(item) {
    series = item.series;
    // Include itself
    activeSeries.push(series);
    // Include parent series
    if (series.linkedParent) {
      activeSeries.push(series.linkedParent);
      // CHANGE
      series.linkedParent.linkedSeries.forEach(function(linkedS) {
        activeSeries.push(linkedS);
      });
      // END CHANGE
    }
    // Include all child series
    if (series.linkedSeries) {
      activeSeries = activeSeries.concat(series.linkedSeries);
    }
    // Include navigator series
    if (series.navigatorSeries) {
      activeSeries.push(series.navigatorSeries);
    }
  });
  // Now loop over all series, filtering out active series
  this.chart.series.forEach(function(inactiveSeries) {
    if (activeSeries.indexOf(inactiveSeries) === -1) {
      // Inactive series
      inactiveSeries.setState('inactive', true);
    } else if (inactiveSeries.options.inactiveOtherPoints) {
      // Active series, but other points should be inactivated
      inactiveSeries.setAllPointsToState('inactive');
    }
  });
};

---

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6m4e8x0y/4974/