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

编程问答 2022-06-01

问题描述

我在使用 Highcharts 时遇到了困难，我只想以这种方式在鼠标悬停事件中突出显示我的列：

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

series: [
  {
    states: {
      hover: {
        color: 'rgba(0,0.4)',},data: [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(),

解决方法

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

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

enter image description here

代码和演示在这里：https://jsfiddle.net/08m21kxo/16/

highchartshighchartsjavascriptreact-highcharts