Есть ли функция для выделения другого показателя / точки / столбца при наведении на элемент Highcharts?

Question

Я настраиваю высокие графики и хочу выделить обе колонки / серию / точку, когда я нахожусь в одной.

JS Fiddle: http://jsfiddle.net/dybtupjc/6/

Исследовал сеть иобнаружил, что я могу использовать mouseOver & out для обработки элемента, но я могу обрабатывать только одну, а не всю статистику серии (что мне нужно: навести одну, а также другую на другом углу)

Попробовал это, но не сработало ..

 this.chartConfig.series = [{type: 'column',name: 'Dh',data: dataPoll,point: {
           //events of highcharts
            events: {
           // on mouse over
                mouseOver: function () {
                     var number;
           // loop through all the values that the chart has
                    for(var i = 0; dataPoll.length > i; i++){
           // this.y is the value formatted on the charted and provide in the mouseOver function
                        if(dataPoll[i] == this.y) {
                            console.log("Match", dataPoll[i])
                            console.log("Number", i)
           // And since there are 12 categories (columns), I add 6 to the hover (which is for testing the first numbers, higher numbers will definitely not work), so it can highlight the upper column
                            var number = i + 6;
                            console.log("Sum", number)

                            $scope.setColorSeries(number);
                        }
                    }
           // This is actual valid code, it updates the color of the column under the cursor. Maybe there is a function to call like: this.data[6].update(....)
                    this.update({
                        color: '#000',
                        colorThis: this.color,
                        numberExtrem: number + 6
                    });

                },
                mouseOut: function () {
                    console.log("out mouse!", this)
                    this.update({
                        color: this.colorThis
                    });
                }
            }
        }}];

Теперь я хочу вот что:

Это должно работать так:

Но на самом деле получается, что я наведите курсор на столбец под курсором, и мне нужно выделить как курсор, так и другой столбец (который будет его аналогом)

Это скрипка, которую я загрузил.Столбец под стрелкой также должен быть черным.

И у меня есть вопрос, как можно добавить и стрелку между двумя столбцами?

Заранее спасибо.

Answer 1

Вы можете использовать точечные события, такие как mouseOver и mouseOut, чтобы получить фактическую точку зависания и на основе ее категории (в полярной диаграмме это угол столбца) вычислить категорию противоположной точки, которая позволяет вам получить этот точечный объекти установите на нем состояние hover .Когда mouseOut события происходят, установите нормальное (пустая строка) состояние снова, используя тот же подход:

JS:

point: {
  events: {
    mouseOver: function() {
      setNextPointState(this, 'hover');
    },
    mouseOut: function() {
      setNextPointState(this, '');
    }
  }
}

function setNextPointState(point, state) {
  var series = point.series,
    category = point.category,
    nextPointCategory = category - 180,
    index,
    nextPoint;

  nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
  nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;

  index = series.xData.indexOf(nextPointCategory);

  if (index !== -1) {
    nextPoint = series.data[index];
    nextPoint.setState(state);
  }
}

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

Демо:
https://jsfiddle.net/BlackLabel/bn5wc80p/

И у меня вопрос, как можно добавить стрелку между двумя столбцами?

Вы можете использовать vector series type.Если вы хотите выделить стрелки, используйте тот же подход, что и для столбцов.Проверьте демо и код, размещенный ниже.

CSS:

.highcharts-vector-series {
  pointer-events: none;
}

JS:

  series: [{
    type: 'column',
    name: 'Column',
    data: [8, 7, 3, 4, 9, 4, 7, 3],
    pointPlacement: 'between',
    point: {
      events: {
        mouseOver: function() {
          setNextPointState(this, 'hover');
          setArrowsState(this, 'green');
        },
        mouseOut: function() {
          setNextPointState(this, '');
          setArrowsState(this, 'rgba(255, 255, 255, 0.3)');
        }
      }
    }
  }, {
    type: 'vector',
    color: 'rgba(255, 255, 255, 0.3)',
    rotationOrigin: 'start',
    vectorLength: 50,
    lineWidth: 4,
    data: [
      [0, 0, 10, 205],
      [0, 0, 10, 250],
      [0, 0, 10, 295],
      [0, 0, 10, 340],
      [0, 0, 10, 25],
      [0, 0, 10, 70],
      [0, 0, 10, 115],
      [0, 0, 10, 160]
    ]
  }]


function setNextPointState(point, state) {
  var series = point.series,
    category = point.category,
    nextPointCategory = category - 180,
    index,
    nextPoint;

  nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
  nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;

  index = series.xData.indexOf(nextPointCategory);

  if (index !== -1) {
    nextPoint = series.data[index];
    nextPoint.setState(state);
  }
}

function setArrowsState(point, color) {
  var series = point.series,
    arrowSeries = series.chart.series[1],
    category = point.category,
    arrowDir = category + 180 + 25,
    nextArrowDir = arrowDir + 180,
    index,
    nextIndex,
    arrow,
    nextArrow;

  arrowDir = (arrowDir > 360) ? arrowDir - 360 : arrowDir;
  nextArrowDir = (nextArrowDir > 360) ? nextArrowDir - 360 : nextArrowDir;

  index = arrowSeries.directionData.indexOf(arrowDir);
  nextIndex = arrowSeries.directionData.indexOf(nextArrowDir);

  if (index !== -1 && nextIndex !== -1) {
    arrow = arrowSeries.data[index];
    nextArrow = arrowSeries.data[nextIndex];

    arrow.update({
        color: color
    });

    nextArrow.update({
        color: color
    });
  }
}

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

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