Highcharts несколько p ie наведение графика

Question

Я использую Highcharts для создания двух диаграмм p ie с одинаковыми ключами, но разными данными на каждой диаграмме. Мой объект параметров выглядит так:

const chartOptions = {
  chart: {
    type: 'pie'
  },
  legend: {
    enabled: false
  },
  tooltip: {
    enabled: true,
  },
  plotOptions: {
    pie: {
      borderWidth: 0,
      cursor: 'pointer'
    },
    series: {
      states: {
        hover: {
          enabled: true
        }
      }
    }
  },
  series: [
    {
      name: 'Chart One',
      colorByPoint: true,
      size: '50%',
      center: ['25%', '50%'],
      data: [
        {color: '#000000', name: 'One', y: 43},
        {color: '#666666', name: 'Two', y: 12},
        {color: '#cccccc', name: 'Three', y: 54},
      ]
    },
    {
      name: 'Chart Two',
      colorByPoint: true,
      size: '50%',
      center: ['75%', '50%'],
      data: [
        {color: '#000000', name: 'One', y: 32},
        {color: '#666666', name: 'Two', y: 78},
        {color: '#cccccc', name: 'Three', y: 11},
      ]
    }
  ]
};

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

На столбчатой ​​диаграмме, когда у вас есть несколько серий и вы наводите курсор на точку в серии A, соответствующие точки в другой серии также загораются (другие точки будут тусклыми вниз). Но не в диаграмме ap ie. При наведении указателя мыши на «тройку» на первой диаграмме, «тройка» на «второй диаграмме» не выделяется.

Возможно ли это как-то сделать?

Answer 1

В функции обратного вызова mouseOver вы можете найти соответствующую точку и вызвать setState('hover') на ней:

    plotOptions: {
        ...,
        series: {
            point: {
                events: {
                    mouseOver: function() {
                        var relatedPoints = [],
                            series = this.series,
                            pIndex = this.index;

                        series.chart.series.forEach(function(s) {
                            if (s !== series) {
                                relatedPoints.push(s.points[pIndex]);
                            }
                        });

                        relatedPoints.forEach(function(p) {
                            p.setState('hover');
                        });
                    }
                }
            }
        }
    }

---

Живая демонстрация: http://jsfiddle.net/BlackLabel/xm7gc5u6/

Ссылка API: https://api.highcharts.com/class-reference/Highcharts.Point#setState