获取条形 Highchart 点击事件上的 X 轴值

Question

好吧，我有一个显示一些分数的条形 Highchart，当我单击情节系列时，我想要得到的是 x 轴值（用户 ID）。

进行一些研究时，我能够在单击图表背景时显示 x 轴值（我正在使用 console.log 来显示此数据），但我无法单击任何情节系列（彩色条)

这是sn-p：

var cats=["1.- John :8","2.- Mark :7","3.- Mary :5","4.- Charles :2","5.- Sarah :1"];
var prcs=[2,12,13,11,15];
Highcharts.chart('container', {
    chart: {
        type: 'bar',
      events:{
        click: function(te){
          console.log(prcs[Math.round(te.xAxis[0].value)]);
        }
      }
    },
    title: {
        text: null
    },
	credits: {
		enabled: false
	},
    xAxis: {
        categories: cats,
		lineColor: '#FFFFFF',
		tickColor: 'transparent',
		labels: {
			align: 'left',
			x: 0,
			y: -12,
			style: {
				textOverflow: 'none',
                width:'300px',
				whiteSpace:'normal'//set to normal
			}
		}
    },
    yAxis: {
        min: 0,
        title: {
            text: null,
        },
		labels: {
			enabled: false
		}
    },
    legend: {
		enabled: false
        //reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                align: 'left',
                color: '#FFFFFF',
                x: 0
            },
            events:{
              click: function(te){
                console.log(this.name);
              }
            }
            //pointPadding: 0,
            //groupPadding: 0
        },
		bar:{
		}
    },
    series:	[{
        name: 'High',
		color: '#009900',
        data: [0,1,0,1,0]
    }, {
        name: 'Mid',
		color: '#FFCC66',
        data: [4,3,0,1,1]
    }, {
        name: 'Low',
		color: '#FF6666',
        data: [4,4,5,1,0]
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 210px"></div>

jsFiddle 中也一样：http://jsfiddle.net/29vfsc4t/5/

如果你点击背景你会得到用户ID，点击任何一个栏你会得到“分数”，我需要的是当我点击一个栏时得到用户ID。

Answer 1

您应该使用 point.event 而不是 chart.event 来获取点的 xAxis 类别：

  plotOptions: {
    series: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        align: 'left',
        color: '#FFFFFF',
        x: 0
      },
      point: {
        events: {
          click: function(te) {
            console.log(this.category);
            console.log(this.x);
          }
        }
      }
    },
    bar: {}
  },

注意更改为 console.log(this.category) 以显示 xAxis 名称。