列のクリックイベントにどのようにアクセスできますか？

Question

クリックイベントのハローにアクセスするにはどうすればよいですか？私の現在のコードでは、実際の列（ポイント）に対してクリックイベントを作成することしかできません。ユーザーが実際の列ではなく陰影のある領域のどこかをクリックできるようにしたい。以下

マイコード：

<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} 
    /> 

Answer 1

私は確信しているが、これは複数回答を持っている別のものです。

は、私はこのように、チャートのクリックイベントを使用することにより近づい：

ユーザーはポイントのオフにクリックしたときのために素晴らしい作品が、彼らはポイントをクリックすると、ポイントのクリックイベントが上書きされます

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

、ユーザーがポイントの、または十字エリアをクリックするか、同じ情報をキャプチャすることができますポイントより上。

例：例との迅速かつ徹底的な対応のための

• http://jsfiddle.net/jlbriggs/xufekLpv/