Question

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

我的代码如下：

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

如何在列点击事件中访问光环？

1 个答案: