在鼠标悬停事件上突出显示 highcharts 栏

Question

我正在为 Highcharts 苦苦挣扎，我只是想通过这种方式在鼠标悬停事件上突出显示我的列：

我使用了如下所示的假数据，但我认为这不是执行此操作的正确方法，而且我只想将工具提示保留在真实列上，而不是在假列之上，即使我启用了共享工具提示.

series: [
  {
    states: {
      hover: {
        color: 'rgba(0, 0, 0, 0.4)',
      },
    },
    data: [400000, 400000, 400000, 400000......], // fake data
    type: 'bar',
    color: 'white',
    pointPlacement: 'on',
    pointWidth: 120,
    grouping: false,
    tooltip: { enabled: false },
  },
  {
    data, // real data from elsewhere
    type: 'bar',
    events: {
      mouseOver: () => displayFakeData(),
      mouseOut: () => hideFakeData(),
    },

Answer 1

使用 Highchart 的 xAxis.crosshair 作为悬停点。

xAxis: {
    crosshair: {
        color: "D9FFFFFF" // change BG color here
    }
},

此处的代码和演示：https://jsfiddle.net/08m21kxo/16/

在鼠标悬停事件上突出显示 highcharts 栏

Highlight highcharts bars on mouse hover events

javascript

highcharts

react-highcharts