Highcharts 如何访问列单击事件上的光环？

如何访问“单击光环”事件？在我当前的代码中，我只能创建一个指向实际列（点）的点击事件。我希望用户能够单击阴影区域中的任何位置，而不是实际列上的任何位置

我的代码如下：

<Chart
  chart={{
  type: 'column',
      backgroundColor: {
        linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
        stops: [
          [0, '#2a2a2b'],
          [1, '#3e3e40']
        ]
      },
      plotBorderColor: '#606063'
    }}
    title={{
      text: 'Quailty Score',
      style: {
        color: '#E0E0E3',
        fontSize: '20px'
      }
    }}
    xAxis={[{
      categories: qualityScore.accountQualityScore.graphData.qualityScore,
      crosshair: true,
      gridLineColor: '#707073',
      labels: {
        style: {
          color: '#E0E0E3'
        }
      },
      lineColor: '#707073',
      minorGridLineColor: '#505053',
      tickColor: '#707073',
      title: {
        style: {
          color: '#A0A0A3'
        }
      }
    }]}
    yAxis={[{
      min: 0,
      gridLineColor: '#707073',
      labels: {
        style: {
          color: '#E0E0E3'
        }
      },
      lineColor: '#707073',
      minorGridLineColor: '#505053',
      tickColor: '#707073',
      title: {
        text: 'Ad Groups',
        style: {
          color: '#A0A0A3'
        }
      }
    }]}
    tooltip={{
      headerFormat: '<table>',
      pointFormat: '<tr><td style="color:{series.color};padding:0">      {series.name}: </td>' +
          '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
      footerFormat: '</table>',
      shared: true,
      useHTML: true,
      backgroundColor: 'rgba(0, 0, 0, 0.85)',
      style: {
        color: '#F0F0F0'
      }
    }}
    plotOptions={{
      column: {
        pointPadding: 0.1,
        borderWidth: 0,
        point: {
          events: {
            click: (e) => {
              console.log(`value: ${e.point.y}`);
            }
          }
        }
      },
      series: {
        dataLabels: {
          color: '#B0B0B3'
        },
        marker: {
          lineColor: '#333'
        }
      },
      boxplot: {
        fillColor: '#505053'
      },
      candlestick: {
        lineColor: 'white'
      },
      errorbar: {
        color: 'white'
      }
    }}
    series={[{
      name: 'Ad Groups',
      data: qualityScore.accountQualityScore.graphData.count
    }]}
    legend={{
      itemStyle: {
        color: '#E0E0E3'
      },
      itemHoverStyle: {
        color: '#FFF'
      },
      itemHiddenStyle: {
        color: '#606063'
      }
    }}
    loading={qualityScore.accountQualityScore.loading}
    />

{
log（`value:${e.point.y}`）；
}
}
}
},
系列：{
数据标签：{
颜色：'#b0b3'
},
标记：{
线条颜色：“#333”
}
},
箱线图：{
填充颜色：“#505053”
},
烛台：{
线条颜色：“白色”
},
错误栏：{
颜色：“白色”
}
}}
系列={[{
名称：'广告组'，
数据：qualityScore.accountQualityScore.graphData.count
}]}
传奇={{
项目样式：{
颜色：“#e0e3”
},
项目悬停样式：{
颜色：'#FFF'
},
itemHiddenStyle：{
颜色：“#606063”
}
}}
正在加载={qualityScore.accountQualityScore.loading}
/>

我相信这是另一个有多个答案的问题

我通过使用图表点击事件来接近，如下所示：

chart: { 
  events: {
    click: function(e) {
      var xVal = Math.round(e.xAxis[0].value),
          yVal = this.series[0].data[xVal].y;
      console.log('x: ', xVal, 'y: ', yVal);
    }
  }
}

这对于用户单击点以外的位置非常有效，但是当用户单击点时，单击点事件会覆盖图表单击事件

因此，我还必须捕获点击事件：

plotOptions: {
  series: { 
    events: {
      click: function(e) {
        var xVal = e.point.x,
            yVal = e.point.y;
        console.log('x: ', xVal, 'y: ', yVal);
      }
    }
  }
}

同时使用这两个单击事件，无论用户单击点还是点上方的十字线区域，都可以捕获相同的信息

例如：

---

感谢您用示例快速、彻底地回复！我没有意识到我必须将点击事件添加到多个位置。我最初认为图表点击事件就足够了。也许有一种不用做两次的方法，但我不确定。