在Highcharts上悬停元素时，是否有功能突出显示另一个统计信息/点/列？

Question

我正在设置图表，当我将鼠标悬停在其中时，要突出显示两列/意向/点。

JS小提琴： 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类的点事件来获取实际的悬停点，并根据其类别（在极坐标图中，它是列角）计算一个相反的点类别，该类别可以让您获取此点对象并在其上设置悬停状态。 当发生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/

我有一个问题，如何在两列之间添加箭头？

您可以使用向量系列类型。 如果要突出显示箭头，请使用与列相同的方法。 检查下面的演示和代码。

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/