Wie greife ich auf den Halo bei einem Klickereignis zu?

Question

Wie greife ich auf den Halo bei Klickereignis zu? In meinem aktuellen Code kann ich nur ein On-Click-Ereignis für die tatsächliche Spalte (Punkt) erstellen. Ich möchte, dass der Benutzer irgendwo in den schattierten Bereich klicken kann, anstatt auf die tatsächliche Spalte.

Mein Code unten:

<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

ich bin sicher, das ist eine andere, die mehrere Antworten gegeben.

näherte ich mich durch das Diagramm Click-Ereignis verwendet wird, wie folgt aus:

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

die großen Werke für, wenn der Benutzer klickt auf der Stelle ab, aber wenn sie auf den Punkt klicken, wird der Punkt Click-Ereignis überschreibt die Diagrammklick-Ereignis

So hatte ich auch den Punkt Click-Ereignis erfassen:

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

zusammen beide Click-Ereignisse können Sie die gleichen Informationen erfassen können, ob der Benutzer auf den Punkt klickt, oder auf dem Fadenkreuz-Bereich über dem Punkt.

Beispiel:

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