Советы по обмену Highcharts только между связанными сериями

Question

Я делаю диаграмму с доверительным интервалом, следующим образом: https://www.highcharts.com/demo/arearange-line

Это прекрасно работает, но когда имеется более одного набора данных (то есть, более двух серий), общие подсказкивлияют на каждую серию, когда я хочу упомянуть только серию (не минимальные и максимальные значения, а не другую строку), на которую наведена мышь, как если бы shared были ложными.

Вот мой соответствующийконфигурация:

tooltip: {
    shared: true,
},

series: [{
    data: averages,
    zIndex: 1,
}, {
    data: ranges,
    type: 'arearange',
    linkedTo: ':previous',
    zIndex: 0,
}, {
    data: averages2,
    zIndex: 1,
}, {
    data: ranges2,
    type: 'arearange',
    linkedTo: ':previous',
    zIndex: 0,
}]

И здесь это демонстрируется в jsfiddle: https://jsfiddle.net/ktd39x97/

У кого-нибудь есть идеи, как мне обойти это?

Answer 1

Highcharts не поддерживает такое поведение общей всплывающей подсказки - для всех серий может быть только один.

Обходной путь:

Этот пользовательский код может имитироватьжелаемое поведение, используя стандартную подсказку без общего доступа:

  tooltip: {
    formatter: function(e) {
      var point = this.point,
        series = point.series,
        chart = series.chart,
        correspondingSeries = series.linkedSeries[0] || series.linkedParent,
        linePoint,
        arearangePoint;

      // unselect previously selected point
      if (chart.extraHoveredPoint) {
        chart.extraHoveredPoint.setState('');
      }

      // find corresponding point
      if (correspondingSeries) {
        correspondingPoint = correspondingSeries.points[point.index];
        correspondingPoint.setState('hover');
        chart.extraHoveredPoint = correspondingPoint;
      }

      // identify type of points for formatting purposes
      if (point.low !== undefined) {
        arearangePoint = point;
        linePoint = correspondingPoint;
      } else {
        arearangePoint = correspondingPoint;
        linePoint = point;
      }

      return "Line: " + linePoint.y + "<br>" + "Arearange: " + arearangePoint.low + " - " + arearangePoint.high;

    }
  },

API-ссылки:

• https://api.highcharts.com/class-reference/Highcharts.Point#setState
• https://api.highcharts.com/highcharts/tooltip.formatter

Демонстрационная версия: https://jsfiddle.net/BlackLabel/gq1d1aba/