Question

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

研究了网络，发现我可以使用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

您可以使用诸如executeAction(charIDToTypeID('Invs'), undefined, DialogModes.NO);和mouseOver之类的点事件来获取实际的悬停点，并根据其类别（在极坐标图中为柱角）计算相反的点类别，从而可以获取此点对象并在其上设置悬停状态。当发生mouseOut事件时，使用相同的方法再次设置正常（空字符串）状态：

JS：

mouseOut

API参考：
https://api.highcharts.com/class-reference/Highcharts.Point#setState

演示：
https://jsfiddle.net/BlackLabel/bn5wc80p/

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

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

CSS：

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);
  }
}

JS：

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

API参考：
https://api.highcharts.com/highcharts/series.vector
https://api.highcharts.com/class-reference/Highcharts.Point#update

演示：
https://jsfiddle.net/BlackLabel/Lgkd01q8/

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

1 个答案: